Auto hide bootstrap tooltip

Question

I want to hide automatically the Boostrap tooltip after few seconds.

 <input type="text" title="" data-placement="bottom" style="width:200px" data-toggle="tooltip" autocomplete="off" data-provide="typeahead" class="form-control Waring" name="medicine_name" id="medicine_name" data-original-title="Please Enter Valid medicine name">

Answer 1

Bootstrap has this out of the box, you can set a delay property in options (in js)

delay: { show: 500, hide: 100 }

and in HTML:

data-delay='{"show":"500", "hide":"100"}'

where hide will get triggered after 100 ms

Answer 2

I use this for page-wide auto-hide on all bootstrap tooltips:

$(function () {
   $(document).on('shown.bs.tooltip', function (e) {
      setTimeout(function () {
        $(e.target).tooltip('hide');
      }, 10000);
   });
});

Answer 3

If you are using Bootstrap v4 then, you can try this:

$(document).on('show.bs.tooltip', function (e) {
  setTimeout(function() {   //calls click event after a certain time
   $('[data-toggle="tooltip"]').tooltip('hide');
}, 4000);
});

show.bs.tooltip event is called after a tooltip show is triggered.

Source: https://v4-alpha.getbootstrap.com/components/tooltips/#events

Answer 4

try this

$('#element').on('shown.bs.tooltip', function () {
   setTimeout(function () {
    $('#element').tooltip('destroy');
   }, 2000);
})

Answer 5

jsfiddle

No idea why even bootstrap 4 does not have this feature build in. Anyway

HTML

<button class="btn" data-toggle="tooltip" title="helloworld" data-trigger="click" type="button">click</button>

JS

$(document).on('show.bs.tooltip', function (e) {
  if ($(e.target).data('trigger') == 'click') {
    var timeoutDataName = 'shownBsTooltipTimeout';
    if ($(e.target).data(timeoutDataName) != null) {
      clearTimeout($(e.target).data(timeoutDataName));
    }
    var timeout = setTimeout(function () {
      $(e.target).click();
    }, 5000);
    $(e.target).data(timeoutDataName, timeout);
  }
});

$(document).on('hide.bs.tooltip', function (e) {
  if ($(e.target).data('trigger') == 'click') {
    var timeoutDataName = 'shownBsTooltipTimeout';
    if ($(e.target).data(timeoutDataName) != null) {
      clearTimeout($(e.target).data(timeoutDataName));
    }
  }
});

Answer 6

Here is Simple Answer

$(selector).tooltip({title:"Event", trigger:"focus or hover only", delay:{hide:800}});

Give only hide parameter in delay option.

I don't know why doesn't work on click event.....

but on focus(tab of click) and hover event works fine!!

Answer 7

If you are like me and all else did not work the this is a straight forward solution on jquery.

HTML:

<span data-toggle="tooltip" title="Button-tooltip" data-placement="top">
<button role="button">Button</button>
</span>

Jquery:

$('[data-toggle="tooltip"]').on("mouseleave", function(){
    $(this).tooltip("hide"); 
})

were the data selector is the element you want to target so each time your mouse leaves that element it will hide the tooltip.

Answer 8

Here is the solution for bootstrap 3 manual onclick tooltip autohide:

var el = $(document).find('#element');
el.tooltip({
  "title": "Some title",
  "trigger": "manual",
  "placement": "top"
});
el.tooltip('show');
setTimeout(function() {
  el.tooltip('hide');
}, 900);

Answer 9

Need not to write additional js code, cause this functionality already exists in Bootstrap. Let me suppose that you need not to hide after seconds, but you need to remove annoying tooltip if it already has been read. If you need behavior such as auto-hide Bootstrap tooltip (or popover) on focus out or click anywhere outside of tooltip, use and stylize element which can be in focus. For instance BUTTON.

In template use code:

<button class="tooltip-button"
        role="button"
        data-toggle="tooltip"
        data-placement="right"
        data-html="true"
        data-trigger="focus hover"
        data-title="Your tooltip html code or text">*</button>

Style with SCSS to introduce button as regular text:

button.tooltip-button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0;
  &:not(:disabled) {
    outline: none;
  }
}

And don't forget in your base template initialize all tooltips on page:

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>