Popover

Get started with the popover component to show any type of content inside a pop-up box when hovering or clicking over a trigger element. There are multiple examples that you can choose from, such as showing more information about a user profile, company profile, password strength, and more. Make sure that you have the Flowbite JavaScript included in your project to enable the popover interactivity by following the quickstart guide.

Default popover

User profile

Use this example to show more information about a user profile when hovering over the trigger component.

Company profile

This example can be used to show more information about a company profile.

Image popover

Use this example to trigger a popover component with detailed information and an image when hovering over a portion of highlighted text inspired by Wikipedia and other large news outlets.

Due to its central geographic location in Southern Europe, Italy has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy

Description popover

Show helpful information inside a popover when hovering over a question mark button.

This is just some informational text

Progress popover

Show a progress bar with details inside a popover when hovering over a settings button.

Password strength

Dynamically show the password strength progress when creating a new password positioned relative to the input element.

Placement

Set the position of the popover component relative to the trigger element by using the `placement=top|right|bottom|left` data attribute and its values.

Triggering

Offset

Increase or decrease the default offset by adding the `offset` attribute where the value is an integer.

Animation

Customize the animation of the popover component by using the transition functions from Svelte.

Disable arrow

You can also disable the popover arrow by setting `arrow` attribute to `false`.

External reference

If you need the popover to be attached to the other element then the tiggering one you can pass a CSS query to `reference` prop.

External reference