CODEWITHSUNDEEP
javascripttwitter-bootstraptooltip
SilentCry
SilentCry

Reputation: 2092

Bootstrap's tooltip doesn't disappear after button click & mouseleave

I have a problem with bootstrap's tooltip : When I click on a button, tooltip stays even if is the cursor is outside of the button. I have looked into the manual - Bootstrap's tooltip and if I'm clicking on the buttons, I see the same problem. Is there any solution to fix this? Just tried in latest FF, IE.

Upvotes: 176

Views: 142247

Answers (30)

Thomas Rbt
Thomas Rbt

Reputation: 1538

This worked very well for me (if you don't use rel but data-toggle) :

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

Upvotes: 0

gurkan
gurkan

Reputation: 1480

I personally prefer to hide all of them when clicking on any tooltip. Otherwise, different issues arise while hide one. If another tooltip is clicked, it will already appear again.

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

Upvotes: 0

Vinay Somawat
Vinay Somawat

Reputation: 667

The tooltip was not being cleared on route change, following solution helped me.

private popoverInstance: Popover | null = null;
this.popoverInstance = new Popover(this.elementRef.nativeElement, {
     trigger: this.trigger,
     html: true,
     placement: this.placement ? this.placement : this.place,
     content: el,
     customClass: popoverClass,
});

ngOnDestroy(): void {
    if (this.popoverInstance) {
      this.popoverInstance.dispose(); // Dispose the popover when the directive is destroyed
      this.popoverInstance = null;
    }
  }

Upvotes: 0

Louis
Louis

Reputation: 21

Some part of this issue might be the result of DOM changes that occur while the "hover" state is in force.

I've got my tooltip initiation set like this (copied from the Bootstrap docs https://getbootstrap.com/docs/5.1/components/tooltips/)

    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl, {
        container: 'body',
        trigger : 'hover'          
      })
    })

It uses that '[data-bs-toggle="tooltip"]' selector, they all work, but some like to stay onscreen after the button that invokes it is clicked, specifically if the result of the click wipes out the button that it was shown for.

My solution here is a slightly modified version of another answer here from 2016.... to target anything that matches that same [data-bs-toggle="tooltip"] (Bootstrap 5.1) selector.

As I mentioned above, I think it should be noted that a Bootstrap tooltip can only be properly initiated and work as expected if nothing changes on the DOM while it is showing (typically due to other AJAX results being displayed).
If, for instance, the tooltip is showing while the DIV that contains it shifts down by 10px due to some other DOM change, it sticks (and sometimes even "ghosts" itself). Just a thought. That was partly causing the problem I had.

I made sure that any element with a tooltip on it could not fire a mouse-over (hover) event, until the entire DOM had finished shifting following AJAX output.

I also added this following bit just after the above initiation.

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

Upvotes: 0

dudmax
dudmax

Reputation: 1

For me was important had "hover focus", but solutions that was offer not work for me with "drag and drop" problem: when you click on element and in this time leave mouse cursor and mouse up not in element area, in this case i still have tooltip.

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

This solution work with focus and "drag and drop" problem for me.

Upvotes: 0

Douglas Vicentini
Douglas Vicentini

Reputation: 323

You can hide all Bootstrap's tooltips by simply deleting the created HTML elements to show them.

When you hover over an element with a tooltip, Bootstrap create new HTML elements, and normally delete them when hovering out.

enter image description here

Bootstrap 5

for (const item of document.querySelectorAll('.bs-tooltip-auto')) {
    item.remove();
}

Bootstrap 4

$('.tooltip.show').remove();

Upvotes: 2

devon
devon

Reputation: 59

If the multiple solutions/suggestions above doesn't work. I put the data-bs-* options in a nested span tag after the button tag and it works after button clicked. I may assume that other tags than span should works as well but i didn't try after I got it working.

<div>
 <button type="button">
  <span data-bs-toggle="tooltip" data-bs-placement="top">Button Name</span>
 </button>
</div>

Upvotes: 0

A. Atal
A. Atal

Reputation: 115

If nothing works, try this. *execute when clicked on a button or any element that has the tooltip.

let tooltip = document.getElementsByClassName("tooltip");
tooltip[0].parentNode.removeChild(tooltip[0]);

Upvotes: 2

Vincent Tallon
Vincent Tallon

Reputation: 376

With Bootstrap 5

Tooltips are now initialized in plain/vanilla Javascript. Because I only saw JQuery options here, let me post the VERY SIMPLE and straightforward way in plain JS :

//Initialize bootstrap tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map( function(tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
  trigger : 'hover'
  });
});

You only need to add the "{trigger : 'hover'}" object as an option of bootstrap.Tooltip(element, options).

Source: https://getbootstrap.com/docs/5.1/components/tooltips/#usage

Upvotes: 22

WHY
WHY

Reputation: 278

My problem is in DataTable. Below code works for me.

columnDefs: [
    {
        targets: 0, data: "id", 
        render: function (data, type, full, meta) {
            return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>';
        }
    }
 ],
drawCallback: function() {
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="tooltip"]').on('click', function () {
        $(this).tooltip('hide');
    });
}

Upvotes: 0

Al-Noor Ladhani
Al-Noor Ladhani

Reputation: 2433

I had this issue with Bootstrap 4 on iPhone with Safari.

On PC/Desktop, the tooltip is working great. But when looking on an iPhone with iOS 14, after click / tap on a button, the tooltip remained visible. Also when hiding the layer.

For me, adding this code solved the issue on iPhone:

jQuery('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
}); 

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

Upvotes: 0

konyak
konyak

Reputation: 11716

Using delegation to make it ajax friendly,

// if you're not using turbolinks, then you can remove this parent wrapper
$(document).on('turbolinks:load'), function() {  
  // enable tooltip with delegation to allow ajax pages to keep tooltip enabled
  $('body').tooltip({
    select: "[data-toggle='tooltip']"
  });

  // remove old tooltip from sticking on the page when calling ajax with turbolinks
  $('body').on('click', "[data-toggle='tooltip']", function() {
    $(this).tooltip('dispose');
  });
});

Upvotes: -1

Gregory Bologna
Gregory Bologna

Reputation: 276

Using a forced blur() has the potention to reduce the user experience. I wouldn't do that. I found that removing the "data-original-title" as well as removing the attributes "data-toggle" and "title" worked for me.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");

Upvotes: -1

user12914956
user12914956

Reputation:

Also you can use this way for old versions because the accepted answer didn't worked for me and I wrote this code for my self and its work well.

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

Upvotes: 1

csharpsql
csharpsql

Reputation: 2330

This is also achievable in the HTML by adding the following:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

Upvotes: 16

Alpha
Alpha

Reputation: 329

Working Solution

$(document).on("click",function()
    {
    setTimeout(function()
    {

  $('[data-toggle="tooltip"]').tooltip('hide');

},500);    // Hides tooltip in 500 milliseconds
    });

Upvotes: 6

Gabi L
Gabi L

Reputation: 303

In my case for this was the fix:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

I wasn't obeying this rule from Bootstrap docs:

Tooltips must be hidden before their corresponding elements have been removed from the DOM.

Upvotes: -1

spec
spec

Reputation: 439

in angular 7 with bootstrap 4 and jquery I found this and it works fine. I used dispose because it destroys does not hide the tooltip.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

Upvotes: 9

Hanuman Sahay
Hanuman Sahay

Reputation: 29

You can also use below method to hide tooltip on mouseleave, As below:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85538

This is because trigger is not set. The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.

So all you have to do is to define trigger as 'hover' only. Below the same example you have linked to without persisting tooltips after a button is clicked :

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})

the doc example in a fiddle -> http://jsfiddle.net/vdzvvg6o/

Upvotes: 333

طلحة
طلحة

Reputation: 405

This solution worked for me.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

fiddle

I tried most of the solutions given in previous answers, but none of them worked for me.

Upvotes: 0

Sergey Koshkin
Sergey Koshkin

Reputation: 51

Also you can add:

onclick="this.blur()"

Upvotes: 5

soroxis
soroxis

Reputation: 169

The way I fixed this issue was by removing the tooltip in the click event function using the following code: 

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

Upvotes: 6

Devendra Singraul
Devendra Singraul

Reputation: 951

This works for me :

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

I was disabling save button dynamically then problem was.

Upvotes: -1

Brian C.
Brian C.

Reputation: 7986

I'm using bootstrap tooltip in cycle.js and none of the above worked for me.

I had to do this:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

Upvotes: -1

Nienormalny_
Nienormalny_

Reputation: 470

Hi i have little solution for this issue. When other solutions doesn't work just try this one:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

This is solution for drag and drop too. So i hope this help someone :)

Upvotes: 16

user1322977
user1322977

Reputation: 151

David's answer above helped to fix my problem. I had both hover and click event on the button. Firefox on MAC did behave as I wanted. That is, show tooltip when hover, do not show tooltip for click. On other browsers and OS, When I click, the tooltip appear and stay as show. Even if i move the mouse to other buttons for hover. This is what I had:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true});

This is the fix:

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

Upvotes: 3

Jestino Sam
Jestino Sam

Reputation: 602

Try using rel="tooltip" instead of data-toggle="tooltip" which worked in my case. I was using data-toggle="tooltip" and also set the trigger condition as hover which didn't work in my case. When I changed my data selector, it worked.

HTML Code:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

JS Code //Tooltip $('.btn').tooltip({ trigger: 'hover' });

This will definitely remove the stuck tooltip.

Upvotes: 3

Nitai
Nitai

Reputation: 1959

I know over a year old, but I couldn't get this to work with any examples here. I've had to use the following:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

This also shows the tooltip again upon hover.

Upvotes: 92

Kamornik Cola
Kamornik Cola

Reputation: 684

In my case the issue was reproduced only in Internet Explorer: no matter which element(input, div etc...) has tooltip- if clicked- tooltip remains shown.

found some solutions on web that recommends .hide() that tooltip on elements Click event- but it is bad idea- hovering back to the same element - keeps it hidden... in my case 

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

made all the magic!!!- where .myToolTippedElement is the element that have a tooltip ofCourse...

Upvotes: 14

Related Questions