Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
Tooltip
Flowbite-Svelte allows you to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.Default tooltip example
To get started with using tooltips all you need to do is set `triggeredBy` attribute of the tooltip component to any CSS query targeting trigger element(s). In the following example you can see the tooltip that will be trigger by the `tooltip-default` element to be shown when hovered or focused.hi mom
lorem ipsum, content blah blah, other stuff
Tooltip types
You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `type=light|dark` data attribute.Placement
The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the `placement=top|right|bottom|left` attribute. **Note!** This examples shows you also how to share one tooltip between multiple triggering elements using advanced CSS query.Triggering
Disable arrow
External reference
If you need the tooltip to be attached to the other element then the tiggering one you can pass a CSS query to `reference` prop.External reference