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.
Setup
- Svelte
Default popover
- Svelte
User profile
Use this example to show more information about a user profile when hovering over the trigger component.
- Svelte
Company profile
This example can be used to show more information about a company profile.
- Svelte
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
- Svelte
Description popover
Show helpful information inside a popover when hovering over a question mark button.
This is just some informational text
- Svelte
Progress popover
Show a progress bar with details inside a popover when hovering over a settings button.
- Svelte
Password strength
Dynamically show the password strength progress when creating a new password positioned relative to the input element.
- Svelte
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.
- Svelte
Triggering
- Svelte
Offset
Increase or decrease the default offset by adding the offset attribute where the value is an integer.
- Svelte
Animation
Customize the animation of the popover component by using the transition functions from Svelte.
- Svelte
Disable arrow
You can also disable the popover arrow by setting arrow attribute to false.
- Svelte
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.
- Svelte
Component data
The component inherits the following props, type, and default values from Frame. See types page for type information.
The Popover feature, which provides a tooltip-like behavior, can be easily applied to any interactive element via the
Placement
{{ placement }}
{{ placement }}
{{ placement }}