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 hover
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.
<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 positionsSpecifies 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.
orientation="top"
target-selector
: Specifying different targetstarget-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.
document
can also be used instead to specify a wider range of elements.
target-selector="_previousSibling"
trigger-style
: Specifying how to trigger a tooltipThis 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.
var toggleButton = document.getElementById("custom-toggle-button");
toggleButton.addEventListener("click", function(){
var tooltip = document.getElementById("trigger-style-demo-tip");
tooltip.toggle();
});