Tooltips
A tooltip is a floating element that displays information related to an anchor element when it receives keyboard focus or the mouse hovers over it.
import { useFloating } from '@skeletonlabs/floatin-ui-svelte';Essentials
An accessible tooltip component has the following qualities:
- Dynamic anchor positioning: The tooltip is positioned next to its reference element, and remains anchored to it while avoiding collisions.
- Events: When the mouse hovers over the reference element, or when the reference element receives keyboard focus, the tooltip opens. When the mouse leaves, or the reference is blurred, the tooltip closes.
- Dismissal: When the user presses the esc key while the tooltip is open, it closes.
- Role: The elements are given relevant role and ARIA attributes to be accessible to screen readers.
Examples
Both of these examples have sections explaining them in-depth below.
Example Here
Open state
import { useFloating } from '@skeletonlabs/floating-ui-svelte';
// TBDisOpen determines whether or not the tooltip is currently open on the
screen. It is used for conditional rendering.