Auto placement bootstrap tooltip

At first, How placement works, we need to understand it. When auto is specified with the top | bottom | left | right, it will dynamically reorient the tooltip. When using a function to determine a location, the DOM node is called with the information about the tool as its first argument and the DOM node of the trigger element as its second argument. The "this" context is configured for the tooltip instance.
When we use a function to calculate the placement then it's called by the tooltip container as its first function and the clicking element as its second. This function is set to the tooltip triggering.
For the automatic placement, you can also use the data-placement property for the "auto" value, which will allow the browser to determine the location of the tooltip information. For example, if the value of the "auto left", the tooltip will show it on the left side if it is possible, otherwise, it will show on the right side.

Hover

But sometimes this will not work. So for this problem below a solution mentioned.
Auto-placement bootstrap tooltip when no space for tooltip on top then it will show on the bottom and when space available on top it will show on top. When "auto" is set in tooltip trigger it dynamically repositioned the tooltip DOM. For example: if we set placement to "auto bottom", the tooltip will display on the bottom side if there is space available, otherwise, it will display to the top area. Right now there is no solution available in bootstrap. So for handle this problem use this below mentioned fix:

Step (1) - Add HTML:

    Tooltip

Step (2) - Add CSS:

.box {
  text-align:center;
}
button {
  /*Button bootstrap style*/
}

Step (3) - Add JS:

$(function(){
	var options = {
	    placement: function (context, element) {
	        var position = $(element).position();
	        console.log(position.top - $(window).scrollTop());
	        if (position.top - $(window).scrollTop() < 115){
	            return "bottom";
	        }
	        return "top";
	    }, trigger: "hover"
	};
	$(".btn").tooltip(options);
});