x-tooltip

Basic usage

Hover this div to see a tooltip!
You can include any markup here! (Wow!)

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

Hover this div to see a tooltip!
orientation="top"

Markup


        

target-selector: Specifying different targets

target-selector defines which elements a tooltip attaches to. Valid options:

I would be selected by _previousSibling!
target-selector="_previousSibling"
I would be selected by _nextSibling!

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.

Hover this button!
Hover somewhere else to hide!

Markup