Unable to load Bootstrap tooltip via Ajax

Question

i'm trying to load (via Ajax Call) a tooltip whose title is in HTML tags. In the first page load when it is loaded by the include_once function, the tooltip works fine, but not when i trigger the page load with Ajax Call. Here are my files :

loadTable.php

    <?php
        $content = "<a data-toggle='tooltip' data-html='true' title='<strong>ok</strong>'
<span class='glyphicon glyphicon-align-left'></span></a>";

        echo $content;
    ?>

mypage.php

<button type="button" class="btn btn-primary" onclick="loadPage()">Load</button>
<div id="tableData">
    <?php include_once('loadTable.php');?>
</div>

myjavascriptfile.js

function loadPage(){
    $.ajax({
        type: "POST",
        url: "loadTable.php",
        data:{
            cache: false,
            success: function(result){
                $("#tableData").html(result);
            }
        });
    }
}

NB: of course i have simplified the example at the extreme, just for understanding and simplicity purposes.

What do you mean it doesn't load? It looks like you're loading the same HTML as you had before. — Mike Cluck, Mar 25 '16 at 22:27
Yes it is the same .. But via Ajax, the tooltip doesn't trigger onmouseover the glyphicon. — codeless, Mar 25 '16 at 22:29
You'll need to re-initialize the tool tips on the dynamically loaded elements — Wesley Smith, Mar 25 '16 at 22:29
Sorry, autocorrect, see edit , you'll want something like $('.tooltip').tooltip(); after you update the html I'm not 100% on the syntax and I'm on my phone now but IIRC that is the correct ode but you'll need the adjust the selector as needed to target your tooltip elements — Wesley Smith, Mar 25 '16 at 22:32

codeless · Accepted Answer · 2019-11-05T13:58:08.467

Thanks to DelightedD0D, the solution is to re-initialize the tooltips after Ajax Call.

In my case, i added this line : $('[data-toggle="tooltip"]').tooltip();

function loadPage(){
    $.ajax({
        type: "POST",
        url: "loadTable.php",
        data:{
            cache: false,
            success: function(result){
                $("#tableData").html(result);
                $('[data-toggle="tooltip"]').tooltip();
            }
        });
    }
}

I hope it helps others who have the same problem.

Unable to load Bootstrap tooltip via Ajax

1 Answers1