Javatpoint Logo
Javatpoint Logo

Bootstrap 4 tooltip

In this article, we will create a tooltip with the help of Bootstrap4 tooltip. At the beginning of this article, we will learn some basics of Bootstrap and Bootstrap 4. After that, we will understand this concept with the help of various examples of Bootstrap4 tooltip.

What do you mean by Bootstrap4?

Bootstrap is used for adding design in HTML documents similar to cascading style sheets. The latest version of Bootstrap is Bootstrap 4. It is free to download and use.

The link below is used to add Bootstrap 4 to a template.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

What do you mean by Bootstrap4 Tooltip?

A Bootstrap 4 tooltip is also known as an info tip or screen tip. A graphical user interface (GUI) element is used in conjunction with the cursor or mouse pointer to display information about an item without clicking on it.

Let's take various examples of Bootstrap4 tooltip.

Example 1:

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of the Bootstrap4 tooltip. When a user hovers on the hover over a text, then a tooltip is shown.

Output:

Following is the output of this example:

Bootstrap 4 tooltip

Example 2:

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of the Bootstrap4 tooltip. When a user hovers on the particular text, then the tooltip is shown according to the direction.

Output:

Following is the output of this example:

Bootstrap 4 tooltip

Example 3:

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of Bootstrap4 tooltip.

Output:

Following is the output of this example:

Bootstrap 4 tooltip

Example 4:

Test it Now

Explanation:

In the above example, we have created a tooltip with the help of the Bootstrap4 tooltip.

Output:

Following is the output of this example:

Bootstrap 4 tooltip
Next Topic#





Youtube For Videos Join Our Youtube Channel: Join Now

Feedback

  • Send your Feedback to feedback@javatpoint.com

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA