Tooltips

Usage

Use the tooltip action and provided your desired content. Note that content does support HTML.

<button use:tooltip={{ content: 'Skeleton' }}>Trigger</button>

This will automatically construct and wrap the target element with the required markup.

<!-- Container -->
	<span class="tooltip-container relative regionContainer">
		<!-- Tooltip -->
		<div class="tooltip tooltip-top regionTooltip hidden" role="tooltip" data-testid="tooltip">
			Skeleton
			<!-- Arrow -->
			<div class="tooltip-arrow-top regionArrow" />
		</div>
		<!-- Trigger -->
		<button>Trigger</button>
	</span>

Positions

Adjust the setting for position: 'top|bottom|left|right'

<button use:tooltip={{ content: 'Skeleton', position: 'bottom' }}>Trigger</button>

Styling

Most styles should be handled via global CSS overrides. However, you may override styles using preset keys, similar to component props.

<button use:tooltip={{ ... background: '!bg-secondary-500', text: '!text-yellow-500', width: '!w-56' }}>Trigger</button>

Use style region keys to pass multiple abitrary classes to a particular element region.

<button use:tooltip={{ ... regionTooltip: 'space-y-4 uppercase' }}>Trigger</button>

Tooltip State Handler

You can optionally monitor the open/closed state of a tooltip using state: stateHandler. This will require adding a data-tooltip attribute with a unique identifier.

<button use:tooltip={{ content: 'Skeleton' }} data-tooltip="example">Trigger</button>

In this case, stateHandler is a callback function that will update a local variable. We use the if statement to match a particular tooltip on the page.

let tooltipExample: boolean = false;

function stateHandler(response: { trigger: HTMLElement; state: boolean }): void {
	if (response.trigger.dataset.tooltip === 'example') tooltipExample = response.state;
}

The response trigger will provide an HTMLElement reference to your trigger element. From this you can match the data-tooltip attribute via dataset, while state will be a boolean value representing TRUE for open and FALSE for closed.