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">

Halfbound

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

Trillion

No, hide is the delay before the tooltip is hidden when the mouse pointer leaves the target. As long as the pointer is on the target the tooltip will be shown. I believe the OP wanted to know how to make the tooltip go away after a period of time when the pointer is still over the target. – Linton

@Linton not necessarily - I also had this same question, due to use of a tooltip on a button that, when pressed, adds lots of HTML to an existing DOM, and moves the button away as a result. Without the auto-hide, the user has to scroll up the page and click the tooltip to remove it. – Histochemistry

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

Arian

Answer 3

try this

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

Nineveh

Answer 4

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

Beetle

This is a great answer. Not sure why it doesn't come with it as parameter options, but this saved my day..Thanks! – Warpath

Answer 5

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

Arapaima

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!!

Syncretize

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.

Nat

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);

Grazier

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>

Boxhaul

Answer 10

In my case, I had multiple popups and could not get the popup id easily from the element it was being created from. This is the code I came up with, posting in case it will help someone else:

// get the id for the latest popover
var popid = document.getElementsByClassName('popover')[document.getElementsByClassName('popover').length -1].id;
setTimeout(function () {
    $('#' + popid).fadeOut('slow');
}, 8000);

Realistic

Answer 11

You can use trigger option as hover only. when the cursor is leaving the particular elements and automatically hide tooltip.

$('[data-toggle="tooltip"]').tooltip({
      animation: true
      , container: 'body'
      , html: true
      , placement: 'auto'
      , trigger: 'hover'
});

Groats