Bootstrap Tool tip Plugin

In bootstrap tool tip plugins are used for the description of links. The tool tip is considered as a small pop up box. This box is opened when the mouse points to an element.

The tooltip plugin can be added into bootstrap individually by including the tooltip.js files. Tooltip plugin can also be added all at once when we use bootstrap.js files.


Usage:

Tooltip plugin can be added in two different ways:


By using data attributes:

Tooltip plugin can be used by using data-toggle = “tooltip” inside the anchor element. It should be noted here that the title attribute will be placed after data-toggle = “tooltip” and its value will be the text of the tootltip.

The following is the basic syntax for this:

CODE:

< a href = “#” data- toggle = “tooltip” title = “Title of tooltip” > Title of tooltip

< /a >


By using JavaScript:

The following code of JavaScript can be used to enable tooltip:

CODE:

$ (‘#identifier’).tooltip (options)

The tooltip plugin can only be used if jQuery is activated. Use the following script to enable tooltip plugin:

$(function () { $(“[data-toggle = ‘tooltip’]”).tooltip(); });


Example:

Consider the following example in which tooltip plugin is used through data attributes:

CODE:

<! DOCTYPE html >

< html >

< head >

<title>Bootstrap Example</title>

<meta charset=”utf-8″>

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</head>

<body>

<h4>Example of Tooltip within anchors</h4>

Example of<a href = “#” class = “tooltip-test” data- toggle = “tooltip” title = “Tooltip on left”> Default Tooltip</a>.

Example of<a href = “#” class = “tooltip-test” data- toggle = “tooltip” data-placement = “left” title = “Tooltip on left”>Tooltip on Left</a>.

Example of<a href = “#” data-toggle = “tooltip” data- placement = “top” title = “Tooltip on top”>Tooltip on Top</a>.

Example of<a href = “#” data-toggle = “tooltip” data-placement = “bottom” title = “Tooltip on bottom”>Tooltip on Bottom</a>.

Example of<a href = “#” data-toggle = “tooltip” data- placement = “right” title = “Tooltip on right”>Tooltip on Right</a>

<br>

<h4>Example of Tooltip within 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>

</body>

</html>

The above example will generate the following result:

OUTPUT:

tooltip on left

In the above example, different types of tooltips are created for example tooltip on right, left, etc. by using their respective classes. It should be noted here that when mouse points to the tooltip on left, the pop up box opens on the left side. Same is the case with other tooltips.


Options:

There a number of options for tooltip plugin that can be added by using Bootstrap Data API or by using JavaScript. Consider the following table in which we have described a number of options of tooltip plugin:

Option Type Default Value Data Attribute Description
animation Boolean Default: true data-animation This option is used to apply a fade transition effect to the tooltip.
html Boolean Default: false data-html This option is used insert html into the tooltip. If the default value is false, then we will use text method of jQuery to add content in DOM.
placement Boolean Default: top data-placement This option is used to decide the position of the tooltip that is if the tooltip is going to be on left side or right, top or bottom or auto. When the value is auto, tooltip will be reoriented for example if value is “auto left”, then tooltip will be displayed on left side only if possible otherwise it will be displayed on the right side.
selector string Default: top data-selector This option is used to assign the tooltip a specific target.
title string Default: “ data- title This option is used to provide the default value of title if there is no title attribute.
trigger string Default: “ data-trigger This option is used to define how tooltip is triggered.
content string Default: “ data-content This option is used to provide the default value of content if there is no data content attribute.
delay number Default: 0 data-delay This option is used to create delay when showing and hiding a tooltip.
container string Default: false data- container This option is used to append the tooltip to specific element.


Methods:

Consider the following table in which we have described various methods of tooltip plugin:

Method Description Basic Syntax
Options- .tooltip (options) This method is used to attach tooltip handler to element. $().tooltip(options)

 

Toggle- .tooltip(‘toggle’) This method is used to toggle the tooltip plugin of any element. $(‘#element’).tooltip(‘toggle’)

 

Show- .tooltip(‘show’) This method is used to show the tooltip of an element. $(‘#element’).tooltip(‘show’)

 

Hide- .tooltip(‘hide’) This method is used to hide the tooltip of an element. $(‘#element’).tooltip(‘hide’)

 

Destroy- .tooltip(‘destroy’) This method is used to destroy the tooltip of any element. $(‘#element’).tooltip(‘destroy’)

 


Example:

Consider the following example in which tooltip plugins are used by using data attributes:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

<div style = “padding: 100px 100px 10px;”>

Example of<a href = “#” class = “tooltip-show” data-toggle = “tooltip”

title = “show”>Tooltip on (show) method</a>.

Example of<a href = “#” class = “tooltip-hide” data-toggle = “tooltip”

data-placement = “left” title = “hide”>Tooltip on (hide) method</a>.

Example of <a href = “#” class = “tooltip- destroy” data-toggle = “tooltip”

data-placement = “top” title = “destroy”>Tooltip on (destroy) method</a>.

Example of <a href = “#” class = “tooltip-toggle” data-toggle = “tooltip”

data-placement = “bottom” title = “toggle”>Tooltip on (toggle) method</a>.

<br><br><br>

< p class = “tooltip- options” >

Example of <a href = “#” data-toggle = “tooltip” title = “<h3> Heading 3

</h3>”>Tooltip on (option) method</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>

The above code will generate the following result:

OUTPUT:

show


Events:

Consider the following table in which the events of tooltip are described:

Event Description Basic Syntax
show.bs.tooltip This event is occurred when the show method is invoked. $(‘#Tooltip1’).on(‘show.bs.tooltip’, function () {

Body

})

 

show.bs.tooltip This event is occurred when the tooltip has been shown. $(‘#Tooltip1’).on(‘shown.bs.tooltip’, function () {

Body

})

 

hide.bs.tooltip This event is occurred when the hide method is invoked. $(‘#Tooltip1’).on(‘hide.bs.tooltip’, function () {

Body

})

 

hidden.bs.tooltip This event is occurred when the tooltip has been hidden from the user. $(‘#Tooltip1’).on(‘hidden.bs.tooltip’, function () {

Body

})

 

Example:

Consider the following example which shows the tooltip via data attributes:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< meta charset = “utf- 8” >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< h4 > Example of Tooltip Plugin within anchor element < /h4 >

Example of < a href = “#” class = “tooltip- show” data- toggle = “tooltip”

title = “Default Tooltip” > Tootltip (Default) </ a >.

< script >

$ (function () { $ (‘.tooltip- show’).tooltip (‘show’);});

$ (function () { $ (‘.tooltip- show’).on (‘show. bs. tooltip’, function () {

alert (“This is an Alert Message”);

})} );

</ script >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

default tooltip

When the mouse points on “Tooltip (Default)” option, an alert message will appear. This is demonstrated in the image below:

ok