Tooltip

Tooltip

PTooltip displays short helper content on hover or focus and automatically repositions to stay in the viewport.

Demo

Usage

<PTooltip text="Copied to clipboard">
  <PButton size="sm">Copy</PButton>
</PTooltip>

<PTooltip
  text="Status details"
  preferred-position="right"
  display="block"
  :anchor-class="['max-w-sm']"
  :anchor-style="{ marginTop: '0.5rem' }"
>
  <PButton size="sm" type="success">Block trigger</PButton>
</PTooltip>

Use display, anchorClass, and anchorStyle when the trigger wrapper needs to participate in layout or carry utility classes/styles. These props affect the trigger element, not the teleported tooltip panel.

Props

Prop	Type	Default	Notes
text	String	''	Fallback tooltip text when no content slot is provided.
preferredPosition	String	top	top, bottom, left, right.
display	String	inline	Controls the trigger wrapper element: inline renders a span, block renders a div.
anchorClass	`String	Array	Object`
anchorStyle	`String	Object`	{}
maxWidth	Number	280	Max width in pixels.
type	String	info	main, complementary, success, warning, danger, info.
purpose	String	accent	accent or filled.
arrowVariant	String	none	semantic, neutral, split, tint, none.
bordered	Boolean	false	Adds a border style variant.
animate	Boolean	true	Enables enter animation.
animationDistance	Number	10	Enter animation travel distance in pixels.
animationDuration	Number	140	Enter animation duration in milliseconds.

Events

PTooltip does not emit custom events.

Slots

Slot	Description
default	Trigger element.
content	Optional custom tooltip body content.