x-tooltip
Basic usage
Markup
<div class="target-button">
Hover this div to see a tooltip!
</div>
<x-tooltip>You can include any markup here! <a href="#">(Wow!)</a></x-tooltip>
orientation
: Specifying different positions
orientation="top"
Markup
target-selector
: Specifying different targets
target-selector
defines which elements a tooltip attaches to. Valid options:
_previousSibling
(default): This indicates that the tooltip is attached to the element directly preceding it in the HTML markup._nextSibling
: This indicates that the tooltip is attached to the element directly following it in the HTML markup.- CSS selectors relative to the
document
can also be used instead to specify a wider range of elements.
target-selector="_previousSibling"
Markup
trigger-style
: Specifying how to trigger a tooltip
This specifies what kind of interaction with a target element will
trigger the element. You can either specify hover
or
any native event type.
You can also specify trigger-style="custom"
to turn off built-in handlers and use the tooltip's .show
, .hide
, and .toggle
methods to build your own triggers.