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.

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.

• javascript
• php
• jquery
• ajax
• twitter-bootstrap-tooltip

• What do you mean it doesn't load? It looks like you're loading the same HTML as you had before. – Mike Cluck Commented Mar 25, 2016 at 22:27
• Yes it is the same .. But via Ajax, the tooltip doesn't trigger onmouseover the glyphicon. – codeless Commented Mar 25, 2016 at 22:29
• 3 You'll need to re-initialize the tool tips on the dynamically loaded elements – Wesley Smith Commented Mar 25, 2016 at 22:29
• any idea how to do that ? – codeless Commented Mar 25, 2016 at 22:31
• 3 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 Commented Mar 25, 2016 at 22:32

1 Answer 1

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.