Popover
Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles
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
<script>
import { Popover } from 'flowbite-svelte'
</script>Default popover
Popover title
<Popover class="w-64 text-sm font-light " title="Popover title">
<Button slot="trigger">Default popover</Button>
And here's some amazing content. It's very engaging. Right?
</Popover>User profile
Use this example to show more information about a user profile when hovering over the trigger component.
Description popover
Show helpful information inside a popover when hovering over a question mark button.
Activity growth - Incremental
Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.Calculation
For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period. Read morePlacement
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.
Popover top
Popover right
Popover bottom
Popover left
<Popover placement="top" class="w-64 text-sm font-light " title="Popover top">
<Button slot="trigger">Top popover</Button>
And here's some amazing content. It's very engaging. Right?
</Popover>
<Popover placement="right" class="w-64 text-sm font-light " title="Popover right">
<Button slot="trigger">Right popover</Button>
And here's some amazing content. It's very engaging. Right?
</Popover>
<Popover placement="bottom" class="w-64 text-sm font-light " title="Popover bottom">
<Button slot="trigger">Bottom popover</Button>
And here's some amazing content. It's very engaging. Right?
</Popover>
<Popover placement="left" class="w-64 text-sm font-light " title="Popover left">
<Button slot="trigger">Left popover</Button>
And here's some amazing content. It's very engaging. Right?
</Popover>Props
The component has the following props, type, and default values. See types page for type information.
Modal
| Name | Type | Default |
|---|---|---|
| title | string | '' |