Bootstrap Tooltip Plugins Examples

First Page
Next Page

Bootstrap Tooltip Plugins

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href="bootstrap.min.css" rel="stylesheet">
      <script src="jquery.min.js"></script>
      <script src="bootstrap.min.js"></script>
   </head>
   <body>
      <div style="padding: 100px 100px 10px;">
         It is a <a href="#" class="tooltip-show" data-toggle="tooltip"
         title="show">Tooltip on method show</a>.

         It is a <a href="#" class="tooltip-hide" data-toggle="tooltip"
         data-placement="left" title="hide">Tooltip on method hide</a>.

         It is a <a href="#" class ="tooltip-destroy" data-toggle="tooltip"
         data-placement="top" title="destroy">Tooltip on method destroy</a>.

         It is a <a href="#" class="tooltip-toggle" data-toggle="tooltip"
         data-placement="bottom" title="toggle">Tooltip on method toggle</a>.

         <br><br><br><br><br><br>

         <p class="tooltip-options" >
            It is a <a href="#" data-toggle="tooltip" title="<h2>'am Header2
            </h2>">Tooltip on method options</a>.
         </p>
         <script>
            $(function () { $('.tooltip-show').tooltip('show');});
            $(function () { $('.tooltip-hide').tooltip('hide');});
            $(function () { $('.tooltip-destroy').tooltip('destroy');});
            $(function () { $('.tooltip-toggle').tooltip('toggle');});
            $(function () { $(".tooltip-options a").tooltip({html : true });});
         </script>
      </div>
   </body>
</html>

Output

First Page
Next Page