How to bind bootstrap tooltip on dynamic elements

Question

When using Bootstrap tooltip, we need to write something like this to have tooltip functionality:

$(".showtooltip").tooltip();

But the problem is, we need to rerun that code every time when new content is loaded via ajax. Is there anyway to run the code for once and auto apply the tooltip when new element is loaded?

Thank you.

Elfayer · Accepted Answer · 2022-05-07T03:11:37.627

74

You need to use selector property. See on the documentation :

"If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example."

JS example code :

$('body').tooltip({
    selector: '.createdDiv'
});

$('#add-button').click(function() {
    $('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container');
});

DEMO

edited May 07 '22 at 03:11

answered Jul 09 '14 at 13:45

Elfayer

4,411
9
46
76

1

I needed the `select: '.classname'` in order for mine to work. I'm using handlebars to dynamically load templates and populating them with ajax calls. While the tooltips are working on the items loaded on initial page load, they just were not working on the dynamic elements until I added the selector. Thank you. – HPWD Jan 13 '18 at 21:56

score 50 · Answer 2 · answered Mar 29 '16 at 15:15

50

Try this:

$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});

answered Mar 29 '16 at 15:15

Aliti

2,025
2
27
39

4

You may need to attach this to your document ready event: `$(document).ready(function(){ $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); });` – TEK Aug 03 '19 at 23:10

jay padaliya · Answer 3 · 2021-07-28T09:10:16.667

2

Bootstrap 4:

$(document).tooltip({selector: '[data-toggle="tooltip"]'});

$(document).popover({selector: '[data-toggle="popover"]'});

edited Jul 28 '21 at 09:10

answered Jul 28 '21 at 06:13

jay padaliya

624
6
12

Hooman Limouee · Answer 4 · 2022-11-16T03:04:26.610

<= Bootstrap v5.x, tooltip() doesn't exist in JQuery object.

So I came up with this self made solution.

I don't really know about performance problems or any better workaround.

So if there is a better solution to this, just let me know in the comments so I remove or update my answer.

Here is what I did and works for me :

var body = $('body');
body.on('mouseover', '[data-bs-toggle="tooltip"]', function (e) {
    e.stopPropagation();
    return new bootstrap.Tooltip(this).show();
});

body.on('mouseleave', '[data-bs-toggle="tooltip"]', function (e) {
    $('[role="tooltip"]').fadeOut(function () {
        e.stopPropagation();
        $(this).remove();
    });
});

score 0 · Answer 5 · answered Apr 29 '23 at 02:46

0

I found all presented examples as very complex. Maybe JQuery and Bootstrap have changed since then.

You can use this as the very simple one:

  $('#myButtonId').prop('title', 'Trustee election in effect');

answered Apr 29 '23 at 02:46

Mr.B

3,484
2
26
40

score 0 · Answer 6 · answered Jul 19 '23 at 01:59

Here's what got mine working:

I have this function, officially from bootstrap docs.

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

I then call this function when the DOM has finished loading during page load as well as after I load the dynamic content the DOM like so:

function addDynamicContent()
{
  $('#element').html('<span data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</span >');
  initializeBootstrapTooltip();
}

How to bind bootstrap tooltip on dynamic elements

6 Answers6

Linked