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)?
You can use the tooltip constructor like this for each tooltip you want to run:
Here is a JSFiddle