Other
Tooltip
Toggle

Accessibility

This components follows A11y standards so aria attributes and keyboard interactions are managed automatically.

	Syntax	Default / Arguments	Description
Option	`a11y:Object\|false`	`<Object>`	Aria options
Option	`a11y.role:String\|false`	`'tooltip'`	Inject `role` and related attributes, can be `'popup'`, `'dialog'`, `'tooltip'`, `'carousel'`, also if has container and targets and no divs between `'tablist'`, `'menu'`, `'listbox'`
Option	`a11y.labelElements:Boolean`	`true`	Inject `aria-labelledby` attributes on elements (linking to targets)
Option	`a11y.labelTargets:Boolean`	`false`	Inject `aria-labelledby` attributes on targets (linking to elements)
Option	`a11y.controls:Boolean`	`false`	Inject `aria-controls` attributes
Option	`a11y.selected:Boolean`	`false`	Inject `aria-selected` attributes
Option	`a11y.expanded:Boolean`	`false`	Inject `aria-expanded` attributes
Option	`a11y.live:Boolean`	`true`	Inject `aria-live` attributes on auto
Option	`a11y.disabled:Boolean`	`true`	Inject `aria-disabled` attributes on enable/disable
Option	`a11y.keyboard:Boolean`	`true`	Automatic keyboard next, previous and exit interactions
Option	`a11y.vertical:Boolean`	`false`	Vertical arrows instead of horizontal for keyboard events
Option	`a11y.items:String\|false`	`false`	Navigate activated target with arrows and search when typing

Do not rely/use aria attributes, they are generated and they can change anytime.

If you want to disable the component use the options.disabled.

	Syntax	Default / Arguments	Description
Option	`disabled:Boolean`	`false`	Disable the component
Option	`disableDeactivate:Boolean`	`true`	Deactivate automatically on disable and destroy

With nested selectors change the elements and targets query.

Example of component disabled on desktop with match media.

You can add additional options that gets added on match media query. You can use different queries with different and nested options.

	Syntax	Default / Arguments	Description
Option	`matches:Object`	`false`	Add additional options on match media query

Use <div class="xt-backdrop z-below bg-gray-900 opacity-25"></div> inside .xt-tooltip to add a customizable backdrop.

Use on:z-tooltip to have the button above the backdrop.

On sequential activation you can automatically set zIndex of activated elements and targets.

It's better to keep the start value like the css one, but you can change the factor on activation.

	Syntax	Default / Arguments	Description
Option	`zIndex:Object\|false`	`{ targets: { start: 500, factor: -1 } }`	Set `z-index` on activation, can be `elements`, `targets`, `elementsInner`, `targetsInner`

	Syntax	Default / Arguments	Description
Option	`debug:Boolean`	`false`	Debug on console
Option	`visibleReinit:Boolean`	`false`	Reinit when `self.container` becomes visible with `display` only one time and only if not already visible