Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
popover
communitycreator

How to use the Bootstrap 4 popover

Chinweuba Elijah Azubuike

What is popover?

The popover is one of Bootstrap's plugins that enable users to get more details about an element when they click on it. It can have more textual content than tooltip. It is used to add a description to an element without tampering with the initial layout.

Let's look at an example.

Example

Bootstrap popover

Code explanation

Line 15: We apply the popover to a button element and three attributes make this possible. They are as follows:

  • data-toggle="popover": This is used together with Bootstrap JavaScript in line 20 to locate and display the popover.
  • title="popover header": This is the heading of the popover. For this popover, we use popover header. Your title can be more relevant to the element you are applying it to.
  • data-content="some content describing the button" : This is inside the data-content. It is where we write the content we want the user to see in our popover.

Feel free to experiment with the code samples made available.

RELATED TAGS

bootstrap
popover
communitycreator

CONTRIBUTOR

Chinweuba Elijah Azubuike
RELATED COURSES

View all Courses

Keep Exploring