Bootstrap - 多个工具提示绑定到同一个元素（“html”）答案

【问题标题】：Bootstrap - multiple tooltip binds to the same element ("html")Bootstrap - 多个工具提示绑定到同一个元素（“html”）
【发布时间】：2017-09-04 20:09:33
【问题描述】：

我想为动态创建的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>

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-tooltip

【解决方案1】：

您可以为每个要运行的工具提示使用这样的工具提示构造函数：

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

这是JSFiddle

【讨论】：