Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

tooltip
bootstrap
communitycreator

How to use the Bootstrap tooltip

Chinweuba Elijah Azubuike

What is a tooltip?

In simple terms, the tooltip gives a short text description to whatever it is attached to when a user hovers over it. The tooltip is pop-up text in a box form that shows up when the user hovers the mouse pointer over an element.

Example

Let's look at the example below:

bootstrap tooltip

Explanation

In the code above, we apply the tooltip on a <button> element:

  • Line 16: We use the data-toggle='tooltip' to show the tooltip using the bootstrap JavaScript.
  • Line 23: We use the data-placement="top" to position the tooltip for this. It displays at the top of the button. The user sees title="Button tooltip" when they hover over the button.
  • Line 17: The same process is repeated.
Note: Try to play around with the code sample to get familiar with it.

RELATED TAGS

tooltip
bootstrap
communitycreator

CONTRIBUTOR

Chinweuba Elijah Azubuike
RELATED COURSES

View all Courses

Keep Exploring