Automatic placement of bootstrap tooltip

At first, how placement works, we want to grasp it. once the automotive vehicle is specified with the top | bottom | left | right, it'll dynamically reorient the tooltip. once employing a operate to see a location, the DOM node is termed with the data concerning the tool as its initial argument and therefore the DOM node of the trigger component as its second argument. The "this" context is organized for the tooltip instance.
When we use a function to calculate the position then it's referred to as by the tooltip container as its initial operation and therefore the clicking component as its second. This operate is about to the tooltip triggering.
For the automated placement, you'll be able to also use the data-placement property for the "auto" worth, which can enable the browser to see the situation of the tooltip data. for instance, if the worth of the "auto left", the tooltip can show it on the left facet if it's possible, otherwise, it'll show on the proper facet.

<button data-placement="auto top" class="btn button" data-toggle="tooltip" title="Tooltip Text" type="button">Hover</button>type="button">Hover</button>

But generally, this will not work. so for this problem below an answer mentioned.
Auto-placement bootstrap tooltip once no house for tooltip on top then it'll show on the bottom and once house obtainable on top it'll show on prime. once "auto" is about in tooltip trigger it dynamically repositioned the tooltip DOM.

For example: if we tend to set placement to "auto bottom", the tooltip will show on the bottom facet if there's area available, otherwise, it'll show to the highest area. at once there's no answer available in bootstrap.

so for handle this problem use this below mentioned fix:

Step (1) - Add HTML:

<button data-placement="auto top" class="btn button" data-toggle="tooltip" title="Tooltip Text" type="button">Hover</button>quot; type="button">Tooltip</button>

button {
   display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid #2e6da4;
    border-radius: 4px;
    background-color: #337ab7;
}

$(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);
});