Bootstrap Tutorial

CHAPTER
39
Bootstrap Tooltip Plugin
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.
If you want to include this plugin functionality individually, then you will need tooltip.js. Else, as mentioned in the
chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger
element. You can add tooltips in the following two ways:
Via data attributes: To add a tooltip, add data-toggle="tooltip" to an anchor tag. The title of the anchor will
be the text of a tooltip. By default, tooltip is set to top by the plugin.
Hover over me
Via JavaScript: Trigger the tooltip via JavaScript:
$('#identifier').tooltip(options)
Tooltip plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. To use this
plugin you MUST activate it using jquery (read javascript). To enable all the tooltips on your page just use this
script:
$(function () { $("[data-toggle='tooltip']").tooltip(); });
EXAMPLE
The following example demonstrates the use of tooltip plugin via data attributes.
Tooltip examples for anchors
This is a
Default Tooltip
.
This is a
Tooltip on Left
.
TUTORIALS POINT
Simply Easy Learning