x-tooltip

« Back to docs

Basic usage

In its most basic form, place the <x-tooltip> in the markup immediately after the element that should trigger it. (You can specify the target element with an attribute, but the default is the previous sibling.)

By default, the <x-tooltip> will trigger on a click event, and will be auto-oriented.

Note that the tooltip is not removed from its markup location, and will thus retain the same nesting and DOM ancestors that it started in.

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

Markup

<div class="target-button">
Click this div to see a tooltip!
</div>
<x-tooltip>You can include any markup here! <a href="#">(Wow!)</a></x-tooltip>
Top

orientation: Specifying different positions

Specifies where the <x-tooltip> appears in relation to the target triggering element.

Valid options: "left","right","top","bottom","auto"

By default, the orientation is "auto", meaning that the <x-tooltip> will attempt to place itself in the best position that doesn't overlap the triggering element.

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

Markup


        
Top

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


        
Top

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.

Click this button!
Click somewhere else to hide!

Markup


            
            
        
Top