Renders a tooltip around its content.

Accessibility

Shows on focus as well as hover, so keyboard users get it too, and hides on Escape. The bubble carries role="tooltip" and is linked to the trigger with aria-describedby.

A note on quoting

The label is passed through x-data as JSON, so apostrophes are safe:

<.tooltip text="It's fine" >…</.tooltip>

In v0.1.x this was interpolated into a single-quoted JavaScript string, so the same input produced a syntax error and silently disabled the component.

Attributes

• id (:string) - Defaults to nil.
• text (:string) (required) - The tooltip label.
• position (:string) - Defaults to "top". Must be one of "top", "bottom", "left", or "right".
• delay (:integer) - Milliseconds to wait before showing. Defaults to 0.
• class (:string) - Applied to the wrapper, not the bubble. Defaults to nil.
• tooltip_class (:string) - Replaces the bubble's own classes. Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required) - The element the tooltip describes.