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

Question

I would like to add tooltip to dynamically created div-s. In my case only html tag doesn't change. Simple example:

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

The first tooltip works, while the second one not. I know work around by using only one bind, but the question is if this is possible to bind tooltip multiple times to the same element (just like it is in the example)?

rollingthedice · Accepted Answer · 2017-09-05 01:11:04Z

2

You can use the tooltip constructor like this for each tooltip you want to run:

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

Here is a JSFiddle

answered Sep 5, 2017 at 1:11

rollingthedice

1,1258 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related