Tooltip

Aria

RTL

A means of displaying a description or extra information about an element, usually on hover, but can also be on click or tap.

Anatomy

<Tooltip>
  <Tooltip.Trigger>...</Tooltip.Trigger>
  <Tooltip.Content>
    ...
    <Tooltip.Arrow />
  </Tooltip.Content>
</Tooltip>

Tooltip props

Name	Type	Required	Default	Description
default	slot	Yes	-	Message shown in tooltip, see Tooltip.Content
trigger	slot	Yes	-	Hover element, see Tooltip.Trigger

Tooltip.Content props

Name	Type	Required	Default	Description
arrow	slot	No	-	Arrow element, see Tooltip.Arrow
class	css_class	No	-	Classes for customization
position	top-start \| top-center \| top-end \| bottom-start \| bottom-center \| bottom-end \| right \| left	No	top-center	Position of the tooltip

Tooltip.Arrow props

Name	Type	Required	Default	Description
class	css_class	No	-	Classes for customization