Learn Bootstrap Tooltip with 5 online demos

Bootstrap Tooltip

Creating Tooltips as the mouse hovers over the links, buttons etc. is quite easy and nicely styled in Bootstrap. In this tutorial, we will show you how to create nice tooltips in buttons and links using the Bootstrap Framework with examples that can be seen online.

By default, the tooltips are shown on the top as mouse hovers over an element. Using the Bootstrap, you can set its direction to the top, left, right or bottom as well. You have to give a title attribute in the tooltip of bootstrap, for the text to be shown as mouse gets over the element.

A few quick Tooltip examples

Tooltip on top of the element

Tooltip in all positions example

Tooltip example in the links

Tooltip with HTML example

Example of tooltip on the top

Following example shows tooltip as mouse hovers over the button. The tooltip will be shown on top of the button.

Experience this online

The tooltip is shown by using the jQuery as you can see in the <head> tag.

Example of tooltip in all directions

Following example shows tooltip in bootstrap to the left, right, top and bottom that are handled in jQuery.

Experience this online

Example of Tooltip by data attribute

The following example shows bootstrap tooltip by using the data attribute, unlike above examples where we used jQuery. In that case, unlike other plugins used in Bootstrap you have to activate the tooltip plugin as follows:

<script>

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

</script>

Following example first activates the tooltip plugin and then the tooltips are shown by using the data attributes.

Experience this online

Tooltip example in links

The following example gives an idea how to use tooltip in the anchor text. You still have to activate the plug-in, as shown in above example. Otherwise, an ordinary tooltip will be shown.

Experience this online

Tooltip with HTML example

The following example shows how to create Bootstrap Tooltips with HTML inside it. For illustration purpose, we have included an h1 heading, a link and an image inside the tooltip. In order to use Tooltip inside the <a> tag with HTML you have to use this: data-html=”true”. See following example..

Experience this online

Also see Twitter Bootstrap | Bootstrap Table | Bootstrap Form