如何在包含 ajax 后初始化引导程序工具提示？

Question

我正在使用 ajax 将内容 (HTML) 加载到我的网站。这包括，除其他外，这个片段：

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

如此处所述：bootstrap 3 > tooltip，我需要对其进行初始化。 ajax 成功后如何初始化？编辑：完整的工作示例。这里我模拟了一个"ajax call"。问题是持续时间。当您删除超时时，它将起作用：

<!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>

Answer 1

https://plnkr.co/edit/KBsJK27F9Sb5kV2Ozy56

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

并在 ajax 成功后重新激活工具提示功能：

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

只需添加此属性： data-placement="right"

如何在包含 ajax 后初始化引导程序工具提示？

How to initialize bootstraps tooltip after including with ajax?

html

javascript

ajax

twitter-bootstrap

twitter-bootstrap-tooltip