Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this section of our tutorial on Bootstrap, we will discuss about Bootstrap Tooltip Plugin.
Bootstrap tooltip is used to describe a link. Bootstrap tooltips plugin was inspired by jQuery.tipsy plugin written by Jason Frame. Tooltips have since been updated severally to function without images, animate with a CSS animation and data-attributes for local title storage.
Bootstrap tooltip is used to describe a link. Bootstrap tooltips plugin was inspired by jQuery.tipsy plugin written by Jason Frame. Tooltips have since been updated severally to function without images, animate with a CSS animation and data-attributes for local title storage.
If you want to add this bootstrap plugin functionality individually, you are going to need tooltip.js. Else, as mentioned in the tutorial Bootstrap plugins overview, you can add bootstrap.js or the manified bootstrap.min.js.
Usage
Bootstrap tooltip plugin generates content and markup on demand, and by default it places tooltips after their trigger elements. Tooltips can be added in the following two ways -
- Via data-attributes - To add a tooltip, simply 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.
<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>
- Via JavaScript - Trigger the tooltip via JavaScript with the code below -
$('#identifier').tooltip(options)
Tooltip plugin is NOT only-css plugin like dropdown or other plugins discussed in previous tutorials. To use this plugin you must activate it via jquery. To enable all the tooltips on your page simply use this script -
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
READ: Bootstrap | Tab Plugin
Example
Following example demonstrates the usage of tooltip plugin via data attributes -
<h4>Tooltip examples for anchors</h4> This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" title = "Tooltip on left"> Default Tooltip</a>. This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>. This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" title = "Tooltip on top">Tooltip on Top</a>. This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom" title = "Tooltip on bottom">Tooltip on Bottom</a>. This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" title = "Tooltip on right">Tooltip on Right</a> <br> <h4>Tooltip examples for buttons</h4> <button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left"> Default Tooltip </button> <button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "left" title = "Tooltip on left"> Tooltip on left </button> <button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "top" title = "Tooltip on top"> Tooltip on top </button> <button type = "button" class = "btn btn-default" data-toggle = "tooltip" data-placement = "bottom" title = "Tooltip on bottom"> Tooltip on bottom </button> <button type = " button" class = " btn btn-default" data-toggle = "tooltip" data-placement = "right" title = "Tooltip on right"> Tooltip on right </button> <script> $(function () { $("[data-toggle = 'tooltip']").tooltip(); }); </script>
Output
When the above example is executed, it will produce the following result -
Options
There are certain options that can be added using the Bootstrap Data API or invoked by JavaScript. The following table below lists the options -
| Option Name | Type/Default Value | Data attribute name | Description |
|---|---|---|---|
| animation | boolean Default: true | data-animation | Applies a CSS fade transition to the tooltip. |
| html | boolean Default: false | data-html | Inserts HTML into the tooltip. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks. |
| placement | string|function Default: top | data-placement | Specifies how to position the tooltip (i.e., top|bottom|left|right|auto). When auto is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. |
| selector | string Default: false | data-selector | If a selector is provided, tooltip objects will be delegated to the specified targets. |
| title | string | function Default: " | data-title | The title option is the default title value if the title attribute isn’t present. |
| trigger | string Default: 'hover focus' | data-trigger | Defines how the tooltip is triggered: click| hover | focus | manual. You may pass multiple triggers; separate them with a space. |
| content | string | function Default: '' | data-content | Default content value if data-content attribute isn't present |
| delay | number | object Default: 0 | data-delay | Delays showing and hiding the tooltip in ms — does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is − delay: { show: 500, hide: 100 } |
| container | string | false Default: false | data-container | Appends the tooltip to a specific element. Example: container: 'body' |
Methods
The following are some useful methods for tooltips -
| Method | Description | Example |
|---|---|---|
Options − .tooltip(options) | Attaches a tooltip handler to an element collection. | $().tooltip(options) |
Toggle − .tooltip('toggle') | Toggles an element's tooltip. | $('#element').tooltip('toggle')
|
Show − .tooltip('show') | Reveals an element's tooltip. | $('#element').tooltip('show')
|
Hide − .tooltip('hide') | Hides an element's tooltip. | $('#element').tooltip('hide')
|
Destroy − .tooltip('destroy') | Hides and destroys an element's tooltip. | $('#element').tooltip('destroy') |
Example
Following example demonstrates the usage of tooltip plugin method -
<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>
Output
When the above example is executed, it will produce the following result -
Events
Following table lists the events to work with tooltip plugin. These events may be used to hook into the function -
| Event | Description | Example |
|---|---|---|
| show.bs.tooltip | This event fires immediately when the show instance method is called. | $('#myTooltip').on('show.bs.tooltip', function () { // do something }) |
| shown.bs.tooltip | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). | $('#myTooltip').on('shown.bs.tooltip', function () { // do something }) |
| hide.bs.tooltip | This event is fired immediately when the hide instance method has been called. | $('#myTooltip').on('hide.bs.tooltip', function () { // do something }) |
| hidden.bs.tooltip | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). | $('#myTooltip').on('hidden.bs.tooltip', function () { // do something }) |
Example
Following example demonstrates the usage of tooltip plugin events -
<h4>Tooltip examples for anchors</h4> This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" title = "Default Tooltip">Default Tooltip</a>. <script> $(function () { $('.tooltip-show').tooltip('show');}); $(function () { $('.tooltip-show').on('show.bs.tooltip', function () { alert("Alert message on show"); })}); </script>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Modal Plugin
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Popover Plugin.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.