Tooltip
The Tooltip element is used to display a popup tooltip on mouseover and can be attached to various elements of a web page. It is easily customizable with attributes for content and location. The tooltip appears when the user hovers the mouse over the target element, and disappears when the mouse leaves the element.
Basic Usage
The sample shows a tooltip in its basic use, i.e. as a short additional context to the target element.
When to use
Use wje-tooltip when you need to instantly communicate a status, the result of an action, or the next step to the user.
When not to use
Don't use multiple competing feedback channels at the same time for one event.
Accessibility
Communicate message status through appropriate ARIA live regions and manage focus (open/close) for modal elements.
Recommended practices
- Select the severity of the messages (info/success/warning/error) according to the real impact on the user.
- For blocking actions, prefer confirmation only where irreversible change is imminent.
- Set consistent timeouts so the user has time to read the message.
Attributes and properties
active
| Popis | Určuje, či je tooltip zobrazený. |
| Atribút | active |
| Typ | boolean |
| Predvolené | - |
content
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe content. |
| Atribút | content |
| Typ | string |
| Predvolené | - |
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
native | Štýluje koreňovú shadow časť komponentu. |
CSS custom variables
| Názov | Popis |
|---|---|
--wje-tooltip-arrow-color | Vlastná CSS premenná, ktorá riadi arrow color. |
Slots
| Názov | Popis |
|---|---|
arrow | Slot pre vlastný prvok šípky. |
anchor | Slot pre kotviaci alebo referenčný prvok. |