Tooltips

Informative tooltips that render on mouse over.

javascript

import { tooltip } from '@brainandbones/skeleton';

javascript

// Included in 'all.css' and 'elements.css'
import '@brainandbones/skeleton/styles/elements/tooltips.css';

Usage

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

html

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

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

html

<!-- 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'

html

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

Style Keys

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

html

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

Style Region Keys

Use style regions to pass multiple abitrary classes to a particular element.

html

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

Action Params

Param styles should only be used for updating a single tooltip instance.

Prop	Type	Default	Values	Required	Description
content	string	(tooltip)	HTML	✓	The HTML content of your tooltip.
position	string	top	top \| bottom \| left \| right	-	Designates where the tooltip will appear.
inline	boolean	false	true \| false	-	Sets the wrapping element to inline or block.
background	string	-	class	-	Provide a class to set the background color.
color	string	-	class	-	Provide a class to set the text color.
width	string	-	class	-	Provide a class to set the width.
padding	string	-	class	-	Provide a class to set the padding.
shadow	string	-	class	-	Provide a class to set the box shadow.
rounded	string	-	class	-	Provide a class to set the border radius.
regionContainer	string	-	class	-	Provide arbitrary classes to the container element.
regionTooltip	string	-	class	-	Provide arbitrary classes to the tooltip element.
regionArrow	string	-	class	-	Provide arbitrary classes to the tooltip arrow element.

Classes

In most cases you should override Tooltip styles globally using these selectors.

Selector	Description
`.tooltip-container`	The wrapping DIV container.
`.tooltip`	The tooltip element body.
`.tooltip-arrow`	The small tooltip arrow.

Accessibility

Note the the ARIA Guidelines are a work-in-progress and subject to change over time.

Keyboard Interactions

Key	Description
`Esc`	Closes all open tooltips.