Toggletip

Toggletip.vue

<template>
  <PeachyToggletip.Toggletip>
    <PeachyToggletip.Trigger>Toggletip</PeachyToggletip.Trigger>

    <PeachyToggletip.Target>
      <span>Toggletips can include short texts.</span>
    </PeachyToggletip.Target>
  </PeachyToggletip.Toggletip>
</template>

toggletip.css

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

.peachy-toggletip__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>
  <PeachyToggletip.ToggleTip>
    <PeachyToggletip.Trigger />

    <PeachyToggletip.Target>
      <span />
    </PeachyToggletip.Target>
  </PeachyToggletip.ToggleTip>
</template>

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

Props & Emits

Trigger

Props

Name	Default	Type	Description
is	button	string?	The is attribute for the dynamic root component.

---

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

Target IS ALWAYS VISIBLE, IT'S CONTENT IS NOT

Target will always render to allow announcing the content when it appears for screen readers - you can use a wrapper element inside it to style the toggletip when visible (like in the example).

CSS Selectors

The root component (Toggletip) 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 toggletip. See Floating UI.	Target

Accessibility

Resources: Tooltip & Toggletips

Keyboard interactions

Key	Action
Esc	Closes the toggletip.

The toggletip closes on outside clicks.