Feedback

Tooltip

A hover/focus description bubble for a slotted trigger.

fandry-tooltip

Example

Link to section Example

Custom colors and parts

Link to section Custom colors and parts

The same component with a few --fd-* tokens set around it and its parts restyled. The code is under Parts below.

Props

Link to section Props

Prop	Type	Default	Description
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Bubble position relative to the trigger.
`open-delay`	`number`	`300`	Milliseconds of hover before the bubble opens.

Parts

Link to section Parts

Style the elements inside the component from your own CSS with ::part(). Every fandry component renders in native shadow DOM, so parts work on LWR and Salesforce alike. For colors, spacing, radius and type across many components, set the --fd-* tokens instead. The code for the "Custom colors and parts" example above:

Part	Description
`trigger`	The wrapper of the trigger slot.
`panel`	The surface that opens: a dropdown's list, a popover, a tooltip, a dialog, a loading overlay's box.
`arrow`	The arrow that points at the trigger.

<!-- template -->
<div class="brand row">
  <fandry-tooltip placement="top" open-delay="0">
    <fandry-button slot="trigger" variant="secondary">Hover me</fandry-button>
    Free returns within 30 days
  </fandry-tooltip>
</div>

/* css */
fandry-tooltip::part(panel) {
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  background: hsl(160 84% 26%);
  border-radius: 0.5rem;
}

fandry-tooltip::part(arrow) {
  background: hsl(160 84% 26%);
}

Code

Link to section Code

<fandry-tooltip placement="top">
  <fandry-button slot="trigger" variant="secondary">Hover me</fandry-button>
  Saves your changes
</fandry-tooltip>