Tooltip

shadow

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

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	any
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

dispatch

Description	Dispatches a custom event from the component context.
Signature	(customEvent: any) => void

beforeShow

Description	Runs before the component is shown so pre-display setup can be applied.
Signature	() => void

afterShow

Description	Runs after the component is shown so follow-up UI logic can be executed.
Signature	() => void

checkSelector

Description	Validates if the specified selector exists within the provided element. Logs an error if the selector is not found and returns the found element or null.
Signature	(anchorEl: HTMLElement) => HTMLElement｜null

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.