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
This example shows the tooltip in its basic usage, as a short piece of supporting context for a target element.
When to use
Use wje-tooltip to communicate status, result of actions, or required next steps immediately.
When not to use
Do not show multiple feedback channels for the same event unless there is a strong reason.
Accessibility
Announce status updates with suitable ARIA live regions and manage focus for modal interactions.
Best Practices
- Match message severity (info/success/warning/error) to actual user impact.
- Use confirmations only for destructive or hard-to-reverse actions.
- Keep timeouts consistent so users have enough time to read messages.
Attributes and Properties
active
| Description | Controls whether the tooltip is visible. |
| Attribute | active |
| Type | boolean |
| Default | - |
content
| Description | The content of the tooltip element. Accepts any valid string value. |
| Attribute | content |
| Type | string |
| Default | - |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native tooltip wrapper. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-tooltip-arrow-color | Specifies the color of the tooltip's arrow. This property determines the visual color of the arrow that points to the element the tooltip is attached to. Accepts any valid CSS color value such as hex, rgb, or CSS variable. |
Slots
| Name | Description |
|---|---|
arrow | The arrow slot for the tooltip. |
anchor | The anchor slot for the tooltip. |