Bootstrap Tooltip: 7 Simple and customized Tooltips demos

The tooltip plugin of Bootstrap Framework

By using the Tooltip.js plugin of Bootstrap framework, you may create tooltips for different elements like buttons, links, text boxes etc. quite easily.

I will show you how to create simple and customized tooltips with online examples in this tutorial.

You may click on any image or link below the image for seeing the live demos.

A simple example of Bootstrap tooltip

In this demo, a tooltip is attached to a button that uses the Bootstrap class. See this online which is followed by how to create it.

Bootstrap tooltip

See online demo and code

These are a few main points to create tooltips:

You have to include the jQuery library as well to call the tooltips along with Bootstrap CSS and JS libraries. By default, the direction of the tooltip is on top of the element.

 

You may set the direction by using the placement option in the script section. See the next example that used placement option.

The title attribute of the element, in that case, a button, is used as the tooltip text.

 

By default, the tooltip background color is black with white text.

You may also use the data attribute to set the options for tooltips, for example:

 

However, you still need to trigger this in JavaScript section.

A demo of Bootstrap tooltips in all directions

In this demo, four buttons are used to show the tooltips in all directions i.e. top, bottom, left and right.

See this online:

Bootstrap tooltip all directions

See online demo and code

The tooltip component has a few options that you may set in the script section. The placement is an option that can be used to set the direction of the tooltip. In the demo, I have used four placements for the buttons, one for each:

 

Note: You may also use data attribute to pass the option rather using the JavaScript.

Tooltip Bootstrap in a textbox

You may also attach tooltips to the textboxes in Bootstrap forms. The process remains the same as I used in the buttons example. See the demo online:

Bootstrap tooltip textbox

See online demo and code

So, you just need to give a title in a textbox field and call it in the script section. The code for the textbox is:

 

(You can see full code in the demo page)

Customizing the tooltips

Until now, you have seen only default tooltip styles as set in the Bootstrap CSS. By overriding the tooltip classes, you may customize the look of tooltips as per need or to match the website theme.

Following are a few examples of Bootstrap tooltip customization.

Tooltips with different colors for each direction

In this demo, each direction i.e. top, bottom, left and right are given different background colors. The tooltips are attached to button elements.

See the demo online.

Bootstrap tooltip custom

See online demo and code

Following classes are used for each direction.

For top tooltip:

 

For bottom tooltip:

 

For the left tooltip:

 

For the right tooltip:

 

There are a few other classes as well to manage arrows or other properties. Have a look at the style tag in the head section in the demo page.

A custom tooltip with CSS3 properties

In this demo, more CSS 3 properties are used to customize the tooltip. I have added linear radiant background along with border-radius properties. See it online:

Bootstrap tooltip CSS3

See online demo and code

A tooltip with HTML elements

Moreover, you may add HTML elements like h1 heading, paragraphs, links, images etc. in Bootstrap tooltips.

The following demo shows how:

Bootstrap tooltip HTML

See online demo and code

So what is done there?

I simply used HTML tags for the link, heading and image inside the title of a link that shows a tooltip.

 

The div element containing the link is called in the JavaScript section:

 

The same custom CSS is used to style the tooltip borders, background etc. as in the above example (See style section). That’s it! An HTML tooltip in Bootstrap forms is shown below with more details.

Custom Tooltips in Bootstrap form

The final demo is to show custom tooltips in Bootstrap form. As you enter the cursor or bring the mouse over a textbox, it will show a tooltip attached to it.

Bootstrap tooltip form

See online demo and code

Simple tooltips are attached to textboxes except password where it used HTML tooltip. To show HTML tooltip you have to specify the selector in script section:

 

While the field that is showing HTML tooltip uses data attributes:

 

The complete password field is:

 

You may use different HTML tags there to display tooltips.