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.
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.
<div class="tooltip-buttons"> <div class="btnTooltip" data-placement="top" title="Tooltip showing in the top position.">Top</div> <div class="btnTooltip" data-placement="right">Right</div> <div class="btnTooltip" data-placement="bottom">Bottom</div> <div class="btnTooltip" data-placement="left" title="Tooltip showing in the left position.">Left</div> </div>
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’|
A quick introduction about bootstrap.js for those who are not aware of it. Bootstrap provides over a dozen custom jQuery plugins and it complements Bootstrap’s components. All those plugins are contained in bootstrap.js or you can choose the plugins only those you require and get a customized download of bootstrap.js Those Bootstrap’s jQuery plugins has jQuery and some more other libraries. Check the individual plugin documentation to know about them. In this tutorial, I have used the bootstrap.js plugin.
This Bootstrap code tutorial was published on April 27, 2017.