CODEWITHSUNDEEP
jquerytwitter-bootstrap-3tooltip
user1995781
user1995781

Reputation: 19463

How to bind bootstrap tooltip on dynamic elements

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.

Upvotes: 47

Views: 51411

Answers (8)

Moses Machua
Moses Machua

Reputation: 11542

In Bootstrap 5;

// to enable tooltips, with default configuration
$('[data-bs-toggle="tooltip"]').tooltip()

// to initialize tooltips with given configuration
$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' })

If you don't want to use jQuery, see the BS5 docs on using pure Js

Upvotes: 0

nunomira
nunomira

Reputation: 398

I've created an example for Bootstrap 5. You have a button with a tooltip which shows on click. Then you have a button to duplicate the previous button.

The on click event is added to the newly created button, and when you click it, the tooltip will also appear. The first time is triggered manually.

Here's the code:

var elms = $('[data-bs-toggle="tooltip"]');
elms.each(function(){
  new bootstrap.Tooltip($(this));
});

$("#target").on( "click", 'a[data-bs-toggle="tooltip"]' , function(e){
  e.preventDefault();
  
  if ( ! bootstrap.Tooltip.getInstance( $(this) ))
  new bootstrap.Tooltip( $(this) ).show();
});


$("#duplicate-btn").click(function(e){
  e.preventDefault();
  $("#target").append( $(".tooltip-btn").clone()[0] );
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">

  <p class="m-5">
    <a class="btn btn-primary tooltip-btn" href="#" data-bs-trigger="focus" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="somethink cool">Click Me for Tooltip</a>
  </p>

  <p class="m-5">
    <a class="btn btn-primary" href="#" id="duplicate-btn">Let's Duplicate</a>
  </p>

  <p class="m-5" id="target">
  </p>

</div>

Upvotes: -1

kapitan
kapitan

Reputation: 2222

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

Upvotes: 1

Mr.B
Mr.B

Reputation: 3797

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

enter image description here

Upvotes: 0

Hooman Limouee
Hooman Limouee

Reputation: 1423

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

Upvotes: 1

Elfayer
Elfayer

Reputation: 4571

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

Upvotes: 79

jay padaliya
jay padaliya

Reputation: 704

Bootstrap 4:

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

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

Upvotes: 2

Aliti
Aliti

Reputation: 2105

Try this: 

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

Upvotes: 52

Related Questions