How to initialize bootstraps tooltip after including with ajax?

Question

I am loading content (HTML) to my website with ajax. This includes, inter alia, this snippet:

<a href="#" data-toggle="tooltip" title data-original-title="My tooltip text...">Hover me...</a>

As described here: bootstrap 3 > tooltip, i need to initialize it. How can i initialize it after ajax success? Edit: Full working example. Here i simulate an "ajax call". The problem is the duration. When you delete the timeout it would work:

<!DOCTYPE html>
<html lang="de">
 <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 </head> 
 <body>
 
  <div id="html" style="margin-top: 50px;">
   That works: <a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 1 text">Hover me 1...</a>
  </div>
  
  <div style="margin-top: 50px;">Ajax: <span id="ajax"></span></div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script type="text/javascript">
   // Document ready
   $(document).ready(function ()
   {
    loadResult();
    activateTooltip();
   });

   // Result
   function loadResult()
   {
    // "Ajax call"   
    setTimeout(function(){
                    var result = '<a href="#" data-toggle="tooltip" title="" data-original-title="My tooltip 2 text">Hover me 2...</a>';
     $("#ajax").html(result);
    }, 2000); // Simulate Ajax duration

    activateTooltip();
   }

   // Tooltip
   function activateTooltip()
   {
    $('[data-toggle="tooltip"]').tooltip();
   }
  </script>

 </body>
</html>

Vicky Gonsalves · Accepted Answer · 2016-01-29T12:40:46.770

1

https://plnkr.co/edit/KBsJK27F9Sb5kV2Ozy56

  <a href="#" data-toggle="tooltip" data-original-title="Tooltip Right works fine" data-placement="right">Hover me...</a>

and reactivate tooltip function in ajax success:

function loadResult()
{
    $.ajax({
        type: "POST",
        url: "index.php?action=loadResult",
        data: "id=1",
        dataType: 'text',
        success: function(data){
            var json = $.parseJSON(data);
            $("#result").html(json.result);
            activateTooltip();
        }
    });
}

Just add this attribute: data-placement="right"

edited Jan 29 '16 at 12:40

answered Jan 29 '16 at 12:02

Vicky Gonsalves

11,593
2
37
58

Sorry, that does not work. I guess i tried that also. – Alex Jan 29 '16 at 12:09
Of course that works, directly in the HTML document. But not, when you include the snipped via an ajax call. (You don't use my script in your example. – Alex Jan 29 '16 at 12:33
can you provide html snippet of `#result` – Vicky Gonsalves Jan 29 '16 at 12:35
I cant replicate the ajax function in my example but I have used `setTimeout` and it works there fine – Vicky Gonsalves Jan 29 '16 at 12:40
Please see my example. It is the duration what makes the problem. – Alex Jan 29 '16 at 13:06
you need to have `activateTooltip();` inside `setTimeout` – Vicky Gonsalves Jan 29 '16 at 13:08

How to initialize bootstraps tooltip after including with ajax?

1 Answers1