Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Examples

Default

<script setup>
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  Button
} from '@empathyds/vue'
</script>

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger as-child>
      <Button variant="outline">Hover</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Props

TooltipProvider

Prop	Type	Default	Description
delayDuration	number	700	The duration from when the mouse enters a tooltip trigger until the tooltip opens.
skipDelayDuration	number	300	How much time a user has to enter another trigger without incurring a delay again.
disableHoverableContent	boolean	false	Whether to disable hoverable content.

Tooltip

Prop	Type	Default	Description
defaultOpen	boolean	false	The open state of the tooltip when it is initially rendered.
open	boolean	-	The controlled open state of the tooltip.
delayDuration	number	700	The duration from when the mouse enters a tooltip trigger until the tooltip opens.
disableHoverableContent	boolean	false	Whether to disable hoverable content.

Slots

TooltipProvider

Slot	Description
default	The content of the provider.

Tooltip

Slot	Description
default	The content of the tooltip.

TooltipTrigger

Slot	Description
default	The content of the trigger.

TooltipContent

Slot	Description
default	The content of the tooltip.