How to Create Tooltips with Bootstrap
In HTML, we can add a title attribute for an element. The text specified in this attribute is shown as a tooltip on the mouse over event. In this tutorial, we are going to create tooltips by using Bootstrap and it has good additional features over the standard tooltip. We initialize the Bootstrap tooltip by referring the element id selector with which the tooltip function should be triggered. In a previous tutorial, we have seen how to show form validation messages using the tooltip.
HTML Elements Triggers Tooltip
The code shows the HTML elements with which the tooltip library function is called on the mouse over event. It shows four DIV elements that trigger tooltip on hover by specifying the tooltip placement location by using data attribute.
jQuery Script to call Bootstrap Tooltip
The following jQuery code shows how to trigger tooltip by specifying options as its arguments. I specify delay and default title to be used if the element title is empty. The title option includes HTML content. HTML code is allowed in the tooltip if the option html is set as true.
The following table shows some more options of the tooltip library function and its default value.
|animation||To add fade in / fade out effect to the tooltip popup.||true|
|container||To specify the element name within which the tooltip markup should be created dynamically to avoid overflow.||false|
|delay||To specify the time in millisecond for the animation effect.||0|
|html||It has boolean value to allow HTML code in the tooltip.||true|
|placement||It is to specify the position of the tooltip (top, right, bottom, left)||top|
|template||HTML template for the tooltip message. The title text will be included inside the div containing the class name tooltip-inner||‘<div class=”tooltip” role=”tooltip”><div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>’|
|title||It accepts text/HTML to be added in the tooltip popup. If the html is true then the HTML code will be included. Otherwise, the HTML tags are stripped and the text content is included in the tooltip.||”|
|trigger||event method like hover, focus, and manual that are to be used for triggering the tooltip. It accepts multiple trigger events||‘hover focus’|