Bootstrap - 多个工具提示绑定到同一元素 ("html")

Question

我想将工具提示添加到动态创建的 div-s。在我的例子中，只有 html 标签没有改变。简单示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>

  <script type="text/javascript">
   (function(){

  $(document).ready(function(){

    $('html').tooltip({
            "title": function(){
                        return $(this).attr("a");
                     },
            "selector": ".a"
    });

    $('html').tooltip({
            "title": function(){
                        return $(this).attr("b");
                     },
            "selector": ".b"
    });
  });

})();
   </script>

  <body>    

        <div class="a" a="testa" style="margin: 100px; width: 20px; height: 20px; background-color:grey;">testa</div>

        <div class="b" b="testb" style="margin: 100px; width: 20px; height: 20px; background-color:purple;">testb</div>

 </body>
</html>

第一个工具提示有效，而第二个无效。我知道仅使用一个绑定即可解决问题，但问题是是否可以将工具提示多次绑定到同一元素（就像示例中那样）？

Answer 1

你可以像这样为你想要的每个工具提示使用工具提示构造函数运行:

new $.fn.tooltip.Constructor($('html'), {
  "title": function(){
    return $(this).attr("name");
  },
  "selector":'.a',
});

这是一个JSFiddle

Bootstrap - 多个工具提示绑定到同一元素 ("html")

Bootstrap - multiple tooltip binds to the same element ("html")

javascript

jquery

twitter-bootstrap

twitter-bootstrap-tooltip