Twitter Bootstrap Question posted in

Twitter bootstrap – the tooltip in bootstrap doesn't work after ajax

I have a file named index.php, which in I include another file named file1.php (in index.php I include all necessary files for jQuery, js etc.).
In file1.php I have a table with buttons which each opens a modal. the information in the modal is from an ajax call for file2.php. in file2.php I create a table. In the table I have the cell : 

<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button>

and, well, the tooltip doesn’t work.
but, when I copy this and get it to file1.php, bellow the table, the tooltip does work.

Can anyone help me fix the tooltip ?
Thx.

Tags:

7

Answers


  1. 0

    I think you need to initialize the tooltip on the newly arrived data, e.g.

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

    Place this code to your AJAX success handler, after the DOM manipulation.

    Login or Signup to reply.
  2. 0

    I set up my tool tip by placement like so:

    function setUpToolTipHelpers() {
    $(".tip-top").tooltip({
        placement: 'top'
    });
    $(".tip-right").tooltip({
        placement: 'right'
    });
    $(".tip-bottom").tooltip({
        placement: 'bottom'
    });
    $(".tip-left").tooltip({
        placement: 'left'
    });
}

    initialize this with a document ready call:

        $(document).ready(function () {
        setUpToolTipHelpers();
    });

    This way I can determine the placement of the tool tip, and I only have to assign the tip with using a class and title:

    <td class = "tip-top", title = "Some description">name</td>

    Then I call, “setUpToolTipHelpers()” inside my success ajax function. Or you can call it on the complete function as well. This seems to work well for me.

    Login or Signup to reply.
  3. 0

    You will have to put the tooltip initialization in Ajax callback function:

    $.ajax({
    method: "POST",
    url: "some.php"
}).done(function( msg ) {
    $('[data-toggle="tooltip"]').tooltip();
});

    -OR-

    instead of putting the initialization code in every Ajax callback function
    you can implement it globally using the ajaxComplete event:

    /* initializate the tooltips after ajax requests, if not already done */    
$( document ).ajaxComplete(function( event, request, settings ) {
    $('[data-toggle="tooltip"]').not( '[data-original-title]' ).tooltip();
});

    This code will initialize the tooltip for every node which has the data-toggle=”tooltip” attribute defined but do not have the attribute “data-original-title” (i.e tooltip not initialized).

    Login or Signup to reply.
  4. 0

    You can do this in one of these two ways:

    1. you can write an ajaxComplete function so that every time after an ajax call completed it reinitialize the tooltip over and over again. This is useful when in most of your pages you have datatables and want to initialize the tooltip after every ajax datatable call:
    $(document).ajaxComplete(function() {
    $("[data-toggle=tooltip]").tooltip();
});
    1. Or you can call tooltip function after ajax success callback:
    function tool_tip() {
    $('[data-toggle="tooltip"]').tooltip()
}

tool_tip();  // Call in document ready for elements already present

$.ajax({
    success : function(data) {
        tool_tip();  // Call function again for AJAX loaded content
    }
})
    Login or Signup to reply.
  5. 0

    I’ve tried everything and nothing worked for me.
    So I took a closer look at tooltip when click* and found out that each time the shown.bs.tooltip is fired a aria-describedby property appears and its value changes every time.

    So, my approach (and it works) is to change the content of this dynamic element.

    I got this code:

    $('body').on('shown.bs.tooltip', function(e) {

    var $element = $(e.target);
    var url = $element.data('url');

    if (undefined === url || url.length === 0) {
        return true;
    }

    var $describedByContent = $('#' + $element.attr('aria-describedby')).find('.tooltip-inner');

    if ($element.attr('title').length > 1) {
        $describedByContent.html($element.attr('title'));
        return true;
    }

    $.ajax({
        url: url,
        method: 'GET',
        beforeSend: function () {
            $element.attr('title', 'Cargando... espere por favor.');
            $describedByContent.html($element.attr('title'));
        }
    }).done(function (data) {
        $element.attr('title', JSON.stringify(data));
        $describedByContent.html($element.attr('title'));
    });

    return true;
});

    In my case my tooltip has a data-url attribute to take the data for the title.
    The original title is ‘-‘, and I don’t want an ajax call every time I click* the element, just the first time.

    To me it’s not useful to make an ajax every time because I don’t expect the data to change that fast.

    The dynamic created element has an element with the class .tooltip-inner, so we just need to replace its content.

    Hope this might help.

    *click: I chose the click event because the default hover sometimes make the system turn crazy and the show.bs.tooltip was fired forever, switching its between the default and new value.

    Login or Signup to reply.
  6. 0

    Use selector on exist element like body

    $('body').tooltip({selector: '[data-toggle="tooltip"]'});
    Login or Signup to reply.
  7. 0

    run

    $('#ding_me_tooltip').tooltip('dispose');
$('#ding_me_tooltip').tooltip();

    after the ajax where #ding_me_tooltip is your selector

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search