The Tooltips in Bootstrap 4

The Bootstrap 4 Tooltips are built by using CSS and JavaScript that uses CSS3 for animation.

The Tooltips can be displayed in various directions explicitly (left, right, top and bottom). The positioning of tooltips is set by using the third party library (popper.js) that must be included before the reference of Bootstrap 4 JS file.

all directions example HTML tooltip in form demo

In the following section, I will show you various examples of creating tooltips. These include simple with default direction, in all directions, tooltips with HTML content, customizing the appearance of tooltip and more.

An example of basic tooltip

In the first example, the tooltip is associated with a button element. As you hover over the button, the tooltip displays in default position – the top.

The button is given a unique ID which is referred in the jQuery code for initiating the tooltip as follows:

Bootstrap tooltip simpe

See online demo and code

The markup:

The script:

You need to include dependency files in the <head> section that you can see on the example page.

Displaying tooltips in all directions

Use the data-placement attribute with any of the following values for displaying tooltip in the desired direction:

  • top
  • bottom
  • left
  • right

Besides, the demo uses data-toggle=”tooltip” attribute in the button tag which is also referred in the jQuery code for initiating all tooltips at a single call. Have a look at the demo with four buttons in all directions:

Bootstrap 4 tooltip

See online demo and code

The markup:

The script for initializing all tooltips:

The example of using HTML tags in tooltip

You may also create tooltips with HTML. Use <p> tags for text paragraph, links, images, heading etc. All you need to do is adding the data-html=”true” attribute and using the HTML tags inside the title attribute for the tooltip.

The following example shows using various tags:

Bootstrap 4 tooltip html

See online demo and code

The HTML code:

Customizing the tooltip appearance

Want to use some other color scheme for the tooltip than the default dark? For that, you may override the .tooltip and its related classes and apply your own style as per desire or to match with the theme of your website.

Precisely, the .tooltip-inner class defines the inner tooltip layout that I have overridden in the example below:

Bootstrap 4 tooltip custom

See online demo and code

The CSS used in the <style> section:

See the complete code and output on the demo page.

Associating custom tooltip with a link

You may associate a tooltip with different HTML elements. In all above examples, I used tooltip with buttons. In this example, the tooltip will display as you hover over the link. This tooltip also uses a custom style with various data attributes:

Bootstrap 4 tooltip link

See online demo and code

The markup:

The CSS:

Using tooltip in a form example

One other important use of tooltips is in Bootstrap 4 based forms. For example, if you have a password field, you may guide a user about the password requirement in a prominent tooltip with information in list format.

See this example online and bring the mouse over any textbox, especially password for seeing how HTML tooltip appears:

Bootstrap 4 tooltip forms

See online demo and code

The markup of the form with tooltips:

You can see, the title is used in the form control tags. In the password field, the data-html=”true” is also used and in the title attribute, the <ul> and <li> tags are used for creating bulleted information.

The same script is used for initializing the tooltips as in above examples with data-toggle=”tooltip”.