Tooltip

A tooltip is a small box with text that is activated on focus or hover. The tooltip summarizes the content or use.

Read more about this component in the Aksel documentation.

Properties

Property	Description	Default	Control
Properties
content required	Text-content inside tooltip. `string`	-
arrow	Toggles rendering of arrow. `boolean`	-
class	`string` `unknown` `unknown`	-
defaultOpen	Tells tooltip to start in open state. Use sparingly since hover/focus on other elements will close it. `open` prop overwrites this. `boolean`	`false`
delay	Adds a delay in milliseconds before opening tooltip. `number`	`150`
describesChild	When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers. When true, content is added as additional information to the child element. `boolean`	`false`
id	Overrides auto-generated tooltip id. `string`	-
keys	List of Keyboard-keys for shortcuts. Can be a flat array of keys (e.g. `["Ctrl", "C"]`) or an array of key groups for multiple shortcuts (e.g. `[["Ctrl", "C"], ["Cmd", "C"]]`). `string[]` `unknown`	-
maxChar	Sets max allowed character length. `number`	`80`
offset	Distance from anchor to tooltip. `number`	-
open bindable	Open state for controlled tooltip. `boolean`	`defaultOpen`
placement	Orientation for tooltip. `"top"` `"right"` `"bottom"` `"left"`	`"top"`
shortcutSeparator	Separator text between key shortcut groups (e.g. "or"). `string`	`"or"`
Snippets
children	Content to which the tooltip will activate.		-
Events
onOpenChange	Change handler for open state.		-