Position and arrow

Use js option position: <value> to specify popperjs placement.

If you want to control a specific tooltip position use [data-xt-position=<value>] on the .xt-tooltip

SyntaxDefault / ArgumentsDescription
Optionposition:StringtopPosition option for popperjs, can be bottom, bottom-start, bottom-end, top, top-start, top-end, left, left-start, left-end, right, right-start, right-end, auto, auto-start, auto-end.
Optioninset:BooleanfalseInset position inside

Use <div class="xt-arrow z-below -inset-1 m-3 w-3 h-3 bg-black"></div> inside .xt-tooltip to add an arrow..

If you cange any of xt-tooltip padding or xt-arrow margin and size you need to revisit all of those sizes.

To not have space just omit .xt-tooltip padding and .xt-arrow margin.

To change the relative position of targets you can specify a query inside element, it doesn't change the element for events.

SyntaxDefault / ArgumentsDescription
OptionpositionInner:Query|falsefalseQuery inside element to use as relative for target position only if found


Here are the main spacing javascript options.

SyntaxDefault / ArgumentsDescription
Optionstrategy:String'absolute'Position strategy, can be 'absolute' or 'fixed'
OptionspaceOverflow:Number15Space to contain the drop
OptionspaceFlip:Number15Space to flip the drop
OptionspaceArrow:Number|falsefalseSpace for arrow, if false automatic

You can pass an option to popperjs for initialization.

If you need to get the popperjs instance use Xt.dataStorage.get(target, 'PopperInstance'), for example when you want to .update() it.

SyntaxDefault / ArgumentsDescription
Optionpopperjs:Object|falsetrueOptions for popperjs

Use strategy fixed when positioning inside fixed elements.

For example you can set preventOverflow boundary to constrain popperjs inside an element.


If you want a tooltip with size and position relative to a parent Node with relative use .xt-tooltip-static.

Utility.xt-tooltip-staticxt-tooltip-staticresponsivePosition relative to closest element with .relative


Use component classes to create a mousefollow.

Remember not to transition transform of .xt-mousefollow element.

This demo uses mousefollow see documentation for more info.