Position
Tooltip
Toggle

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

	Syntax	Default / Arguments	Description
Option	`position:String`	`top`	Position 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`.
Option	`inset:Boolean`	`false`	Inset 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.

	Syntax	Default / Arguments	Description
Option	`positionInner:Query\|false`	`false`	Query inside element to use as relative for target position only if found

Here are the main spacing javascript options.

	Syntax	Default / Arguments	Description
Option	`strategy:String`	`'absolute'`	Position strategy, can be `'absolute'` or `'fixed'`
Option	`spaceOverflow:Number`	`15`	Space to contain the drop
Option	`spaceFlip:Number`	`15`	Space to flip the drop
Option	`spaceArrow:Number\|false`	`false`	Space 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.

	Syntax	Default / Arguments	Description
Option	`popperjs:Object\|false`	`true`	Options 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.

	Syntax	Mixin	Variants	Description
Utility	`.xt-tooltip-static`	`xt-tooltip-static`	`responsive`	Position 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.