How to use Bootstrap Tooltip Plugins

BootstrapWeb DevelopmentCSS Framework

Tooltips are useful when you need to describe a link. The plugin was inspired by jQuery.tipsy plugin written by Jason Frame. Tooltips have since been updated to work without images, animate with a CSS animation, and data-attributes for local title storage.

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.

You can try to run the following code to implement tooltip plugins in Bootstrap −

Example

Live Demo

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

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

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

         This 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" >
            This 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>
raja
Published on 22-Jun-2018 11:15:49
Advertisements