Tooltip
Display elegant tooltips with Tooltip. Fine-tuned customization, accessibility and SEO-friendliness for your Svelte components The Tooltip component can be used to display a tooltip on hover, focus or via a controlled opening. It’s designed to provide a simple, accessible way of delivering contextual information to the user, without cluttering up the interface.
Tooltip can be used with simple text using the label prop, or with richer HTML content using the tooltip slot.
It is particularly useful for enhancing the user experience by explaining icons, specifying actions or providing secondary details.
Demonstrates the simplest use of the tooltip with prop label. The component is automatically positioned around its child element and displayed on hover or focus.
Controls the internal spacing of tooltip content via prop density. Useful for adapting rendering to a dense (compact), more airy (comfortable) or default interface.
Prop location is used to position the tooltip around its activator element. Available values are top, bottom, left and right. Positioning is automatic by default, but can be forced if required.
Instead of using the prop label, you can fully customize the tooltip content with the tooltip slot. This allows you to integrate rich HTML, such as lists, links or specific styles. This approach is ideal for more complex tooltips.
The only variant currently available is arrow, which adds a directional arrow to the tooltip to better indicate its relationship to the trigger element.
Tooltips complement your Buttons or Icons by providing discreet but useful context for users.