Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
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