We now have a youtube channel. Subscribe!

Bootstrap | Tooltip Plugin

Bootstrap | Tooltip Plugin


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.

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(); });


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 NameType/Default ValueData attribute nameDescription
animationboolean Default: truedata-animationApplies a CSS fade transition to the tooltip.
htmlboolean Default: falsedata-htmlInserts 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.
placementstring|function Default: topdata-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.

selectorstring Default: falsedata-selectorIf a selector is provided, tooltip objects will be delegated to the specified targets.
titlestring | function Default: "data-titleThe title option is the default title value if the title attribute isn’t present.
triggerstring Default: 'hover focus'data-triggerDefines how the tooltip is triggered: click| hover | focus | manual. You may pass multiple triggers; separate them with a space.
contentstring | function Default: ''data-contentDefault content value if data-content attribute isn't present
delaynumber | object Default: 0data-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 }
containerstring | false Default: falsedata-containerAppends the tooltip to a specific element. Example: container: 'body'


Methods

The following are some useful methods for tooltips -

MethodDescriptionExample

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 -

EventDescriptionExample
show.bs.tooltipThis event fires immediately when the show instance method is called.
$('#myTooltip').on('show.bs.tooltip', function () {
   // do something
})
shown.bs.tooltipThis 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.tooltipThis event is fired immediately when the hide instance method has been called.
$('#myTooltip').on('hide.bs.tooltip', function () {
   // do something
})
hidden.bs.tooltipThis 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 -



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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain