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”）

1 个答案: