Other
Tooltip
Toggle

Accessibility

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

SyntaxDefault / ArgumentsDescription
Optiona11y:Object|false<Object>Aria options
Optiona11y.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'
Optiona11y.labelElements:BooleantrueInject aria-labelledby attributes on elements (linking to targets)
Optiona11y.labelTargets:BooleanfalseInject aria-labelledby attributes on targets (linking to elements)
Optiona11y.controls:BooleanfalseInject aria-controls attributes
Optiona11y.selected:BooleanfalseInject aria-selected attributes
Optiona11y.expanded:BooleanfalseInject aria-expanded attributes
Optiona11y.live:BooleantrueInject aria-live attributes on auto
Optiona11y.disabled:BooleantrueInject aria-disabled attributes on enable/disable
Optiona11y.keyboard:BooleantrueAutomatic keyboard next, previous and exit interactions
Optiona11y.vertical:BooleanfalseVertical arrows instead of horizontal for keyboard events
Optiona11y.items:String|falsefalseNavigate activated target with arrows and search when typing

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

Disabled and Nested

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

SyntaxDefault / ArgumentsDescription
Optiondisabled:BooleanfalseDisable the component
OptiondisableDeactivate:BooleantrueDeactivate automatically on disable and destroy

With nested selectors change the elements and targets query.

Example of component disabled on desktop with match media.

Match Media

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

SyntaxDefault / ArgumentsDescription
Optionmatches:ObjectfalseAdd additional options on match media query

Backdrop

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.

Zindex

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.

SyntaxDefault / ArgumentsDescription
OptionzIndex:Object|false{ targets: { start: 500, factor: -1 } }Set z-index on activation, can be elements, targets, elementsInner, targetsInner

Other

SyntaxDefault / ArgumentsDescription
Optiondebug:BooleanfalseDebug on console
OptionvisibleReinit:BooleanfalseReinit when self.container becomes visible with display only one time and only if not already visible