Tooltip

UNUSABLE ON TOUCH DEVICES

For a touch-friendly alternative check out <PeachyToggletip />.

Tooltip.vue

<template>
  <PeachyTooltip.Tooltip>
    <PeachyTooltip.Trigger>Tooltip</PeachyTooltip.Trigger>

    <PeachyTooltip.Target>
      <span>Target</span>
    </PeachyTooltip.Target>
  </PeachyTooltip.Tooltip>
</template>

tooltip.css

.peachy-tooltip__target {
  background: none;
  border: none;
}

.peachy-tooltip__target span {
  display: block;
  padding: 0.75em;

  border-radius: var(--border-radius);
  background: var(--bg);
  border: 1px solid var(--divider);

  margin: 0.5rem;

  box-shadow: var(--shadow);
}

Anatomy

<template>
  <PeachyTooltip.Tooltip>
    <PeachyTooltip.Trigger />

    <PeachyTooltip.Target>
      <span />
    </PeachyTooltip.Target>
  </PeachyTooltip.Tooltip>
</template>

<script lang="ts" setup>
  import { PeachyTooltip } from "typeach";
</script>

Props & Emits

Target

Props

Name	Default	Type	Description
is	button	string?	The is attribute for the dynamic root component.
placement	"top"	Placement?	The placement option for Floating UI.

Styling

ENSURE ACCESSIBLE GAPS

If you want a gap between the Trigger and the Target, do not style it on the Target directly - use a wrapper element inside it to style the tooltip (like in the example). Otherwise, trying to move the cursor from the Trigger to the Target will close it.

CSS Selectors

The root component (Tooltip) is purely logical and has no element to style, while the child components follow our CSS classes convention.

State selectors

Selector	Description	For
[data-placement="<Placement>"]	The actual rendered placement of the tooltip. See Floating UI.	Target

Accessibility

Resources: APG Tooltip Pattern

UNUSABLE ON TOUCH DEVICES

For a touch-friendly alternative check out <PeachyToggletip />.

Keyboard interactions

Key	Action
Esc	Closes the tooltip.

The tooltip stays open on hover, unless there is a gap directly between the Target and Trigger, which there is a simple workaround for - see Styling.