Bind bootstrap tooltip on dynamic elements

It is pretty simple to bind a tooltip with elements. Generally, it happends when we works with dynamic elements than it creates problem for some js functions. Tooltip is on of them that never works with dynamic element. So for overcoming that problem we have to bind the tooltip on dynamic elements.

Example.1 :

$('body').tooltip({
    selector: '.current-div'
});

<html>
 <head>
  ..................
  ..................
</head>
<body>
  <div class="current-div'" data-toggle="tooltip" title="I am tooltip.">Hover over me</div>
</body>
</html>

Example.2:

$('body').tooltip({
    selector: '[data-toggle]',
    position: 'top'
});

<html>
 <head>
..................
..................
</head>
<body>
  <a href="#" data-toggle="tooltip" data-placement="top" title="Favorite"><i class="fa fa-heart-o"></i></a>
</body>
</html>



No comments:

Post a Comment