Tooltip

A small, non-interactive label that appears on hover or focus to describe a control. Uses role="tooltip" and wires the trigger to the tooltip via aria-describedby so assistive technologies announce it as a description of the control.

Tooltips are not for interactive content — buttons, links, or forms inside a tooltip will be inaccessible to keyboard users and unreachable by pointer since the tooltip closes on mouseleave. Use Popover for interactive overlays.

Default

Opens after a short hover delay (300ms) or when the trigger receives focus. Dismisses on mouseleave, blur, or ESC.

AstroReactSvelteVue

PreviewCode

---
import Tooltip from "../tooltip.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---

<div class={stack({ gap: "md", direction: "row", align: "center" })}>
  <Tooltip id="astro-demo-tooltip-default" content="Save the document (⌘S)">
    <button class={css({ px: "sm", py: "xs" })}>Save</button>
  </Tooltip>
</div>

import { Tooltip } from "../Tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function DefaultDemo() {
  return (
    <div className={stack({ gap: "md", direction: "row", align: "center" })}>
      <Tooltip id="react-demo-tooltip-default" content="Save the document (⌘S)">
        {(triggerProps) => (
          <button {...triggerProps} className={css({ px: "sm", py: "xs" })}>
            Save
          </button>
        )}
      </Tooltip>
    </div>
  );
}

<script lang="ts">
  import Tooltip from "../tooltip.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";
</script>

<div class={stack({ gap: "md", direction: "row", align: "center" })}>
  <Tooltip id="svelte-demo-tooltip-default" content="Save the document (⌘S)">
    {#snippet children(triggerProps)}
      <button {...triggerProps} class={css({ px: "sm", py: "xs" })}>
        Save
      </button>
    {/snippet}
  </Tooltip>
</div>

<script setup lang="ts">
import { Tooltip } from "@pindoba/vue-tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
const row = stack({ gap: "md", direction: "row", align: "center" });
const btn = css({ px: "sm", py: "xs" });
</script>

<template>
  <div :class="row">
    <Tooltip id="vue-demo-tooltip-default" content="Save the document (⌘S)">
      <template #default="{ triggerProps }">
        <button v-bind="triggerProps" :class="btn">Save</button>
      </template>
    </Tooltip>
  </div>
</template>

Placement

Use the placement prop to control where the tooltip appears relative to its trigger. Floating UI flips or shifts automatically to keep the tooltip inside the viewport.

AstroReactSvelteVue

PreviewCode

---
import Tooltip from "../tooltip.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const placements = ["top", "right", "bottom", "left"] as const;
---

<div class={stack({ gap: "md", direction: "row", align: "center" })}>
  {
    placements.map((placement) => (
      <Tooltip
        id={`astro-tt-placement-${placement}`}
        content={`Tooltip on ${placement}`}
        placement={placement}
      >
        <button class={css({ px: "sm", py: "xs" })}>{placement}</button>
      </Tooltip>
    ))
  }
</div>

import { Tooltip } from "../Tooltip";
import type { Placement } from "@pindoba/core-tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const placements: Placement[] = ["top", "right", "bottom", "left"];

export default function PlacementDemo() {
  return (
    <div className={stack({ gap: "md", direction: "row", align: "center" })}>
      {placements.map((placement) => (
        <Tooltip
          key={placement}
          id={`react-tt-placement-${placement}`}
          content={`Tooltip on ${placement}`}
          placement={placement}
        >
          {(triggerProps) => (
            <button {...triggerProps} className={css({ px: "sm", py: "xs" })}>
              {placement}
            </button>
          )}
        </Tooltip>
      ))}
    </div>
  );
}

<script lang="ts">
  import Tooltip from "../tooltip.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";
</script>

<div class={stack({ gap: "md", direction: "row", align: "center" })}>
  {#each ["top", "right", "bottom", "left"] as placement (placement)}
    <Tooltip
      id={`svelte-tt-placement-${placement}`}
      content={`Tooltip on ${placement}`}
      placement={placement as "top" | "right" | "bottom" | "left"}
    >
      {#snippet children(triggerProps)}
        <button {...triggerProps} class={css({ px: "sm", py: "xs" })}>
          {placement}
        </button>
      {/snippet}
    </Tooltip>
  {/each}
</div>

<script setup lang="ts">
import { Tooltip } from "@pindoba/vue-tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
const row = stack({ gap: "md", direction: "row", align: "center" });
const btn = css({ px: "sm", py: "xs" });
const placements = ["top", "right", "bottom", "left"] as const;
</script>

<template>
  <div :class="row">
    <Tooltip
      v-for="p in placements"
      :key="p"
      :id="`vue-tt-placement-${p}`"
      :content="`Tooltip on ${p}`"
      :placement="p"
    >
      <template #default="{ triggerProps }">
        <button v-bind="triggerProps" :class="btn">{{ p }}</button>
      </template>
    </Tooltip>
  </div>
</template>

Wrap

By default the tooltip panel sizes to its text but caps at 20rem, wrapping longer content to multiple lines. Set wrap={false} to size the panel to its text on a single line (white-space: nowrap, no max width) — ideal for short labels that must not break, like a keyboard shortcut or a file path.

AstroReactSvelteVue

PreviewCode

---
import Tooltip from "../tooltip.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const long =
  "This is a long tooltip that would otherwise wrap across several lines once it hits the 20rem cap.";
const btn = css({ px: "sm", py: "xs" });
---

<div class={stack({ gap: "lg", direction: "row", align: "center" })}>
  <Tooltip id="astro-demo-tooltip-wrap-on" content={long}>
    <button class={btn}>wrap (default)</button>
  </Tooltip>

  <Tooltip id="astro-demo-tooltip-wrap-off" content={long} wrap={false}>
    <button class={btn}>wrap=false</button>
  </Tooltip>
</div>

import { Tooltip } from "../Tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const long =
  "This is a long tooltip that would otherwise wrap across several lines once it hits the 20rem cap.";
const btn = css({ px: "sm", py: "xs" });

export default function WrapDemo() {
  return (
    <div className={stack({ gap: "lg", direction: "row", align: "center" })}>
      <Tooltip id="react-demo-tooltip-wrap-on" content={long}>
        {(triggerProps) => (
          <button {...triggerProps} className={btn}>
            wrap (default)
          </button>
        )}
      </Tooltip>

      <Tooltip id="react-demo-tooltip-wrap-off" content={long} wrap={false}>
        {(triggerProps) => (
          <button {...triggerProps} className={btn}>
            wrap=false
          </button>
        )}
      </Tooltip>
    </div>
  );
}

<script lang="ts">
  import Tooltip from "../tooltip.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const long =
    "This is a long tooltip that would otherwise wrap across several lines once it hits the 20rem cap.";
  const btn = css({ px: "sm", py: "xs" });
</script>

<div class={stack({ gap: "lg", direction: "row", align: "center" })}>
  <Tooltip id="svelte-demo-tooltip-wrap-on" content={long}>
    {#snippet children(triggerProps)}
      <button {...triggerProps} class={btn}>wrap (default)</button>
    {/snippet}
  </Tooltip>

  <Tooltip id="svelte-demo-tooltip-wrap-off" content={long} wrap={false}>
    {#snippet children(triggerProps)}
      <button {...triggerProps} class={btn}>wrap=false</button>
    {/snippet}
  </Tooltip>
</div>

<script setup lang="ts">
import { Tooltip } from "@pindoba/vue-tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
const row = stack({ gap: "lg", direction: "row", align: "center" });
const btn = css({ px: "sm", py: "xs" });
const long =
  "This is a long tooltip that would otherwise wrap across several lines once it hits the 20rem cap.";
</script>

<template>
  <div :class="row">
    <Tooltip id="vue-demo-tooltip-wrap-on" :content="long">
      <template #default="{ triggerProps }">
        <button v-bind="triggerProps" :class="btn">wrap (default)</button>
      </template>
    </Tooltip>

    <Tooltip id="vue-demo-tooltip-wrap-off" :content="long" :wrap="false">
      <template #default="{ triggerProps }">
        <button v-bind="triggerProps" :class="btn">wrap=false</button>
      </template>
    </Tooltip>
  </div>
</template>

Group

All tooltips on the page share a single DOM element and a single open-delay timer. The first trigger you hover pays the full openDelay (300ms); hovering a neighbour while a tooltip is open — or within 500ms after it closes — skips the delay and the tooltip slides from the previous trigger’s anchor to the new one (FLIP animation). This matches the macOS toolbar feel and keeps dense UIs feeling snappy without sacrificing the “first hover is deliberate” guarantee.

AstroReactSvelteVue

PreviewCode

---
import Tooltip from "../tooltip.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const actions = [
  { id: "bold", label: "Bold (⌘B)", icon: "B" },
  { id: "italic", label: "Italic (⌘I)", icon: "I" },
  { id: "underline", label: "Underline (⌘U)", icon: "U" },
  { id: "strike", label: "Strikethrough", icon: "S" },
  { id: "link", label: "Insert link (⌘K)", icon: "🔗" },
];

const buttonClass = css({
  px: "sm",
  py: "xs",
  minWidth: "2.25rem",
  borderRadius: "sm",
  fontFamily: "mono",
  fontSize: "sm",
});
---

<div class={stack({ gap: "2xs", direction: "row", align: "center" })}>
  {
    actions.map((action) => (
      <Tooltip id={`astro-tt-group-${action.id}`} content={action.label}>
        <button class={buttonClass} aria-label={action.label}>
          {action.icon}
        </button>
      </Tooltip>
    ))
  }
</div>

import { Tooltip } from "../Tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const actions = [
  { id: "bold", label: "Bold (⌘B)", icon: "B" },
  { id: "italic", label: "Italic (⌘I)", icon: "I" },
  { id: "underline", label: "Underline (⌘U)", icon: "U" },
  { id: "strike", label: "Strikethrough", icon: "S" },
  { id: "link", label: "Insert link (⌘K)", icon: "🔗" },
];

const buttonClass = css({
  px: "sm",
  py: "xs",
  minWidth: "2.25rem",
  borderRadius: "sm",
  fontFamily: "mono",
  fontSize: "sm",
});

export default function GroupDemo() {
  return (
    <div className={stack({ gap: "2xs", direction: "row", align: "center" })}>
      {actions.map((action) => (
        <Tooltip
          key={action.id}
          id={`react-tt-group-${action.id}`}
          content={action.label}
        >
          {(triggerProps) => (
            <button
              {...triggerProps}
              className={buttonClass}
              aria-label={action.label}
            >
              {action.icon}
            </button>
          )}
        </Tooltip>
      ))}
    </div>
  );
}

<script lang="ts">
  import Tooltip from "../tooltip.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const actions = [
    { id: "bold", label: "Bold (⌘B)", icon: "B" },
    { id: "italic", label: "Italic (⌘I)", icon: "I" },
    { id: "underline", label: "Underline (⌘U)", icon: "U" },
    { id: "strike", label: "Strikethrough", icon: "S" },
    { id: "link", label: "Insert link (⌘K)", icon: "🔗" },
  ];

  const buttonClass = css({
    px: "sm",
    py: "xs",
    minWidth: "2.25rem",
    borderRadius: "sm",
    fontFamily: "mono",
    fontSize: "sm",
  });
</script>

<div class={stack({ gap: "2xs", direction: "row", align: "center" })}>
  {#each actions as action (action.id)}
    <Tooltip id={`svelte-tt-group-${action.id}`} content={action.label}>
      {#snippet children(triggerProps)}
        <button {...triggerProps} class={buttonClass} aria-label={action.label}>
          {action.icon}
        </button>
      {/snippet}
    </Tooltip>
  {/each}
</div>

<script setup lang="ts">
import { Tooltip } from "@pindoba/vue-tooltip";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
const row = stack({ gap: "2xs", direction: "row", align: "center" });
const btn = css({
  px: "sm",
  py: "xs",
  minWidth: "2.25rem",
  borderRadius: "sm",
  fontFamily: "mono",
  fontSize: "sm",
});
const actions = [
  { id: "bold", label: "Bold (⌘B)", icon: "B" },
  { id: "italic", label: "Italic (⌘I)", icon: "I" },
  { id: "underline", label: "Underline (⌘U)", icon: "U" },
  { id: "strike", label: "Strikethrough", icon: "S" },
  { id: "link", label: "Insert link (⌘K)", icon: "🔗" },
];
</script>

<template>
  <div :class="row">
    <Tooltip
      v-for="action in actions"
      :key="action.id"
      :id="`vue-tt-group-${action.id}`"
      :content="action.label"
    >
      <template #default="{ triggerProps }">
        <button v-bind="triggerProps" :class="btn" :aria-label="action.label">
          {{ action.icon }}
        </button>
      </template>
    </Tooltip>
  </div>
</template>

Tooltips work inside modal drawers, dialogs, and popovers — even though those use the browser top layer via <dialog>.showModal(). The shared tooltip element is promoted into the top layer via the native Popover API (popover="manual"), so it always paints above whatever modal it’s triggered from. Browsers without Popover API support fall back to a body-appended element at z-index: 9999.

AstroReactSvelteVue

PreviewCode

---
import Tooltip from "../tooltip.astro";
import Dialog from "@pindoba/astro-dialog";
import Button from "@pindoba/astro-button";
import { Redo2, Save, Trash2, Undo2 } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<Dialog id="astro-demo-tooltip-in-drawer" title="Edit document" drawer="right">
  <div class={stack({ gap: "md" })}>
    <p>
      Tooltips inside a modal drawer paint above the backdrop because the shared
      tooltip element is promoted into the browser top layer.
    </p>

    <div class={stack({ gap: "xs", direction: "row" })}>
      <Tooltip id="astro-demo-tooltip-in-drawer-save" content="Save (⌘S)">
        <Button emphasis="ghost" shape="square" aria-label="Save">
          <Save width={18} height={18} />
        </Button>
      </Tooltip>
      <Tooltip id="astro-demo-tooltip-in-drawer-undo" content="Undo (⌘Z)">
        <Button emphasis="ghost" shape="square" aria-label="Undo">
          <Undo2 width={18} height={18} />
        </Button>
      </Tooltip>
      <Tooltip id="astro-demo-tooltip-in-drawer-redo" content="Redo (⇧⌘Z)">
        <Button emphasis="ghost" shape="square" aria-label="Redo">
          <Redo2 width={18} height={18} />
        </Button>
      </Tooltip>
      <Tooltip
        id="astro-demo-tooltip-in-drawer-delete"
        content="Delete (⌫)"
        placement="bottom"
      >
        <Button
          emphasis="ghost"
          shape="square"
          feedback="danger"
          aria-label="Delete"
        >
          <Trash2 width={18} height={18} />
        </Button>
      </Tooltip>
    </div>
  </div>
</Dialog>

<Button id="astro-demo-tooltip-in-drawer-trigger">Open drawer</Button>

<script>
  document
    .getElementById("astro-demo-tooltip-in-drawer-trigger")
    ?.addEventListener("click", () => {
      window.__PindobaDialogManager?.open("astro-demo-tooltip-in-drawer");
    });
</script>

import React, { useState, type JSX } from "react";
import { Tooltip } from "../Tooltip";
import { Dialog } from "@pindoba/react-dialog";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { SaveIcon, Undo2Icon, Redo2Icon, Trash2Icon } from "./_icons";

export default function InDrawer(): JSX.Element {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Dialog
        id="react-demo-tooltip-in-drawer"
        title="Edit document"
        open={open}
        onOpenChange={setOpen}
        drawer="right"
      >
        <div className={stack({ gap: "md" })}>
          <p>
            Tooltips inside a modal drawer paint above the backdrop because the
            shared tooltip element is promoted into the browser top layer.
          </p>

          <div className={stack({ gap: "xs", direction: "row" })}>
            <Tooltip id="react-demo-tooltip-in-drawer-save" content="Save (⌘S)">
              {(triggerProps) => (
                <Button
                  {...triggerProps}
                  emphasis="ghost"
                  shape="square"
                  aria-label="Save"
                >
                  <SaveIcon size={18} />
                </Button>
              )}
            </Tooltip>
            <Tooltip id="react-demo-tooltip-in-drawer-undo" content="Undo (⌘Z)">
              {(triggerProps) => (
                <Button
                  {...triggerProps}
                  emphasis="ghost"
                  shape="square"
                  aria-label="Undo"
                >
                  <Undo2Icon size={18} />
                </Button>
              )}
            </Tooltip>
            <Tooltip
              id="react-demo-tooltip-in-drawer-redo"
              content="Redo (⇧⌘Z)"
            >
              {(triggerProps) => (
                <Button
                  {...triggerProps}
                  emphasis="ghost"
                  shape="square"
                  aria-label="Redo"
                >
                  <Redo2Icon size={18} />
                </Button>
              )}
            </Tooltip>
            <Tooltip
              id="react-demo-tooltip-in-drawer-delete"
              content="Delete (⌫)"
              placement="bottom"
            >
              {(triggerProps) => (
                <Button
                  {...triggerProps}
                  emphasis="ghost"
                  shape="square"
                  feedback="danger"
                  aria-label="Delete"
                >
                  <Trash2Icon size={18} />
                </Button>
              )}
            </Tooltip>
          </div>
        </div>
      </Dialog>

      <Button onClick={() => setOpen(true)}>Open drawer</Button>
    </>
  );
}

<script lang="ts">
  import Tooltip from "../tooltip.svelte";
  import Dialog from "@pindoba/svelte-dialog";
  import Button from "@pindoba/svelte-button";
  import LucideSave from "@lucide/svelte/icons/save";
  import LucideUndo2 from "@lucide/svelte/icons/undo-2";
  import LucideRedo2 from "@lucide/svelte/icons/redo-2";
  import LucideTrash2 from "@lucide/svelte/icons/trash-2";
  import { stack } from "@pindoba/styled-system/patterns";

  let open = $state(false);
</script>

<Dialog
  id="demo-tooltip-in-drawer"
  title="Edit document"
  bind:open
  drawer="right"
>
  <div class={stack({ gap: "md" })}>
    <p>
      Tooltips inside a modal drawer paint above the backdrop because the shared
      tooltip element is promoted into the browser top layer.
    </p>

    <div class={stack({ gap: "xs", direction: "row" })}>
      <Tooltip id="demo-tooltip-in-drawer-save" content="Save (⌘S)">
        {#snippet children(triggerProps)}
          <Button
            {...triggerProps}
            emphasis="ghost"
            shape="square"
            aria-label="Save"
          >
            <LucideSave size={18} />
          </Button>
        {/snippet}
      </Tooltip>
      <Tooltip id="demo-tooltip-in-drawer-undo" content="Undo (⌘Z)">
        {#snippet children(triggerProps)}
          <Button
            {...triggerProps}
            emphasis="ghost"
            shape="square"
            aria-label="Undo"
          >
            <LucideUndo2 size={18} />
          </Button>
        {/snippet}
      </Tooltip>
      <Tooltip id="demo-tooltip-in-drawer-redo" content="Redo (⇧⌘Z)">
        {#snippet children(triggerProps)}
          <Button
            {...triggerProps}
            emphasis="ghost"
            shape="square"
            aria-label="Redo"
          >
            <LucideRedo2 size={18} />
          </Button>
        {/snippet}
      </Tooltip>
      <Tooltip
        id="demo-tooltip-in-drawer-delete"
        content="Delete (⌫)"
        placement="bottom"
      >
        {#snippet children(triggerProps)}
          <Button
            {...triggerProps}
            emphasis="ghost"
            shape="square"
            feedback="danger"
            aria-label="Delete"
          >
            <LucideTrash2 size={18} />
          </Button>
        {/snippet}
      </Tooltip>
    </div>
  </div>
</Dialog>

<Button onclick={() => (open = true)}>Open drawer</Button>

<script setup lang="ts">
import { ref } from "vue";
import { Tooltip } from "@pindoba/vue-tooltip";
import { Dialog } from "@pindoba/vue-dialog";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
import { Save, Undo2, Redo2, Trash2 } from "./_icons";

const open = ref(false);
</script>

<template>
  <Dialog
    id="vue-demo-tooltip-in-drawer"
    title="Edit document"
    :open="open"
    :onOpenChange="(o: boolean) => (open = o)"
    drawer="right"
  >
    <div :class="stack({ gap: 'md' })">
      <p>
        Tooltips inside a modal drawer paint above the backdrop because the
        shared tooltip element is promoted into the browser top layer.
      </p>

      <div :class="stack({ gap: 'xs', direction: 'row' })">
        <Tooltip id="vue-demo-tooltip-in-drawer-save" content="Save (⌘S)">
          <template #default="{ triggerProps }">
            <Button
              v-bind="triggerProps"
              emphasis="ghost"
              shape="square"
              aria-label="Save"
            >
              <Save :size="18" />
            </Button>
          </template>
        </Tooltip>
        <Tooltip id="vue-demo-tooltip-in-drawer-undo" content="Undo (⌘Z)">
          <template #default="{ triggerProps }">
            <Button
              v-bind="triggerProps"
              emphasis="ghost"
              shape="square"
              aria-label="Undo"
            >
              <Undo2 :size="18" />
            </Button>
          </template>
        </Tooltip>
        <Tooltip id="vue-demo-tooltip-in-drawer-redo" content="Redo (⇧⌘Z)">
          <template #default="{ triggerProps }">
            <Button
              v-bind="triggerProps"
              emphasis="ghost"
              shape="square"
              aria-label="Redo"
            >
              <Redo2 :size="18" />
            </Button>
          </template>
        </Tooltip>
        <Tooltip
          id="vue-demo-tooltip-in-drawer-delete"
          content="Delete (⌫)"
          placement="bottom"
        >
          <template #default="{ triggerProps }">
            <Button
              v-bind="triggerProps"
              emphasis="ghost"
              shape="square"
              feedback="danger"
              aria-label="Delete"
            >
              <Trash2 :size="18" />
            </Button>
          </template>
        </Tooltip>
      </div>
    </div>
  </Dialog>

  <Button :onClick="() => (open = true)">Open drawer</Button>
</template>

Same mechanism — useful for icon toolbars inside popovers where the icons themselves need labels.

AstroReactSvelteVue

PreviewCode

---
import Tooltip from "../tooltip.astro";
import Popover from "@pindoba/astro-popover";
import Button from "@pindoba/astro-button";
import { Bold, Italic, Underline } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Popover id="astro-demo-tooltip-in-popover" title="Text formatting">
    <div class={stack({ gap: "xs", direction: "row" })}>
      <Tooltip
        id="astro-demo-tooltip-in-popover-bold"
        content="Bold (⌘B)"
        triggerStrategy="hover"
      >
        <Button emphasis="ghost" shape="square" size="sm" aria-label="Bold">
          <Bold width={16} height={16} />
        </Button>
      </Tooltip>
      <Tooltip
        id="astro-demo-tooltip-in-popover-italic"
        content="Italic (⌘I)"
        triggerStrategy="hover"
      >
        <Button emphasis="ghost" shape="square" size="sm" aria-label="Italic">
          <Italic width={16} height={16} />
        </Button>
      </Tooltip>
      <Tooltip
        id="astro-demo-tooltip-in-popover-underline"
        content="Underline (⌘U)"
        triggerStrategy="hover"
      >
        <Button
          emphasis="ghost"
          shape="square"
          size="sm"
          aria-label="Underline"
        >
          <Underline width={16} height={16} />
        </Button>
      </Tooltip>
    </div>
  </Popover>

  <Button id="astro-demo-tooltip-in-popover-trigger">Open popover</Button>
</div>

<script>
  import { usePopover } from "@pindoba/astro-popover/use-popover";

  const trigger = document.getElementById(
    "astro-demo-tooltip-in-popover-trigger",
  );
  usePopover({ id: "astro-demo-tooltip-in-popover", trigger });
</script>

import React, { type JSX } from "react";
import { Tooltip } from "../Tooltip";
import { Popover } from "@pindoba/react-popover";
import { Button } from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { BoldIcon, ItalicIcon, UnderlineIcon } from "./_icons";

export default function InPopover(): JSX.Element {
  return (
    <div className={stack({ gap: "md", direction: "column", align: "start" })}>
      <Popover
        id="react-demo-tooltip-in-popover"
        title="Text formatting"
        trigger={(triggerProps) => (
          <Button {...triggerProps}>Open popover</Button>
        )}
      >
        <div className={stack({ gap: "xs", direction: "row" })}>
          <Tooltip
            id="react-demo-tooltip-in-popover-bold"
            content="Bold (⌘B)"
            triggerStrategy="hover"
          >
            {(triggerProps) => (
              <Button
                {...triggerProps}
                emphasis="ghost"
                shape="square"
                size="sm"
                aria-label="Bold"
              >
                <BoldIcon size={16} />
              </Button>
            )}
          </Tooltip>
          <Tooltip
            id="react-demo-tooltip-in-popover-italic"
            content="Italic (⌘I)"
            triggerStrategy="hover"
          >
            {(triggerProps) => (
              <Button
                {...triggerProps}
                emphasis="ghost"
                shape="square"
                size="sm"
                aria-label="Italic"
              >
                <ItalicIcon size={16} />
              </Button>
            )}
          </Tooltip>
          <Tooltip
            id="react-demo-tooltip-in-popover-underline"
            content="Underline (⌘U)"
            triggerStrategy="hover"
          >
            {(triggerProps) => (
              <Button
                {...triggerProps}
                emphasis="ghost"
                shape="square"
                size="sm"
                aria-label="Underline"
              >
                <UnderlineIcon size={16} />
              </Button>
            )}
          </Tooltip>
        </div>
      </Popover>
    </div>
  );
}

<script lang="ts">
  import Tooltip from "../tooltip.svelte";
  import Popover from "@pindoba/svelte-popover";
  import Button from "@pindoba/svelte-button";
  import LucideBold from "@lucide/svelte/icons/bold";
  import LucideItalic from "@lucide/svelte/icons/italic";
  import LucideUnderline from "@lucide/svelte/icons/underline";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", align: "start" })}>
  <Popover id="demo-tooltip-in-popover" title="Text formatting">
    {#snippet trigger(triggerProps)}
      <Button {...triggerProps}>Open popover</Button>
    {/snippet}
    <div class={stack({ gap: "xs", direction: "row" })}>
      <Tooltip
        id="demo-tooltip-in-popover-bold"
        content="Bold (⌘B)"
        triggerStrategy="hover"
      >
        {#snippet children(triggerProps)}
          <Button
            {...triggerProps}
            emphasis="ghost"
            shape="square"
            size="sm"
            aria-label="Bold"
          >
            <LucideBold size={16} />
          </Button>
        {/snippet}
      </Tooltip>
      <Tooltip
        id="demo-tooltip-in-popover-italic"
        content="Italic (⌘I)"
        triggerStrategy="hover"
      >
        {#snippet children(triggerProps)}
          <Button
            {...triggerProps}
            emphasis="ghost"
            shape="square"
            size="sm"
            aria-label="Italic"
          >
            <LucideItalic size={16} />
          </Button>
        {/snippet}
      </Tooltip>
      <Tooltip
        id="demo-tooltip-in-popover-underline"
        content="Underline (⌘U)"
        triggerStrategy="hover"
      >
        {#snippet children(triggerProps)}
          <Button
            {...triggerProps}
            emphasis="ghost"
            shape="square"
            size="sm"
            aria-label="Underline"
          >
            <LucideUnderline size={16} />
          </Button>
        {/snippet}
      </Tooltip>
    </div>
  </Popover>
</div>

<script setup lang="ts">
import { Tooltip } from "@pindoba/vue-tooltip";
import { Popover } from "@pindoba/vue-popover";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
import { Bold, Italic, Underline } from "./_icons";
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', align: 'start' })">
    <Popover id="vue-demo-tooltip-in-popover" title="Text formatting">
      <template #trigger="{ triggerProps }">
        <Button v-bind="triggerProps">Open popover</Button>
      </template>
      <div :class="stack({ gap: 'xs', direction: 'row' })">
        <Tooltip
          id="vue-demo-tooltip-in-popover-bold"
          content="Bold (⌘B)"
          triggerStrategy="hover"
        >
          <template #default="{ triggerProps }">
            <Button
              v-bind="triggerProps"
              emphasis="ghost"
              shape="square"
              size="sm"
              aria-label="Bold"
            >
              <Bold :size="16" />
            </Button>
          </template>
        </Tooltip>
        <Tooltip
          id="vue-demo-tooltip-in-popover-italic"
          content="Italic (⌘I)"
          triggerStrategy="hover"
        >
          <template #default="{ triggerProps }">
            <Button
              v-bind="triggerProps"
              emphasis="ghost"
              shape="square"
              size="sm"
              aria-label="Italic"
            >
              <Italic :size="16" />
            </Button>
          </template>
        </Tooltip>
        <Tooltip
          id="vue-demo-tooltip-in-popover-underline"
          content="Underline (⌘U)"
          triggerStrategy="hover"
        >
          <template #default="{ triggerProps }">
            <Button
              v-bind="triggerProps"
              emphasis="ghost"
              shape="square"
              size="sm"
              aria-label="Underline"
            >
              <Underline :size="16" />
            </Button>
          </template>
        </Tooltip>
      </div>
    </Popover>
  </div>
</template>

Props

props · 13 total

prop	type	default	description
content	stringSnippet	undefined	Tooltip content. Can be a plain string or a Svelte snippet for rich markup.
id	string	auto-generated UUID	Unique identifier used for the tooltip element and wired to the trigger via aria-describedby.
placement	"top""top-start""top-end""bottom""bottom-start""bottom-end""left""left-start""left-end""right""right-start""right-end"	"top"	Preferred placement of the tooltip relative to the trigger. Floating UI flips or shifts as needed.
triggerStrategy	"hover""focus""hover-focus""manual"	"hover-focus"	How the trigger opens the tooltip. 'hover' opens on mouseenter. 'focus' opens on focus. 'hover-focus' combines both (recommended for accessibility). 'manual' leaves event wiring to the consumer.
openDelay	number	300	Delay in ms before a hover trigger opens the tooltip. Ignored by focus/manual.
closeDelay	number	100	Delay in ms before a hover trigger closes the tooltip. Ignored by focus/manual.
offset	number	6	Distance in pixels between trigger and tooltip.
openWhen	string	undefined	CSS selector gating hover/focus opens: the tooltip only opens while the trigger, or one of its ancestors, matches it. Re-checked on every interaction, so it follows live DOM changes with no re-render… openWhen CSS selector gating hover/focus opens: the tooltip only opens while the trigger, or one of its ancestors, matches it. Re-checked on every interaction, so it follows live DOM changes with no re-render — a collapsible navigation rail passes '[data-component="navigation"][data-compact]' so labels only appear on hover while collapsed. Omit for a tooltip that always opens. Typestring Defaultundefined RequiredNo
anchor	string	undefined	CSS selector for the element the tooltip positions against, when that is not the element it listens on. Hover/focus and aria-describedby stay on the trigger; only the floating reference moves. Use it… anchor CSS selector for the element the tooltip positions against, when that is not the element it listens on. Hover/focus and aria-describedby stay on the trigger; only the floating reference moves. Use it when the trigger opens something else on the same interaction — a collapsed navigation rail's row opens a flyout panel, and a tooltip anchored to the row would land on top of it. Resolved when the tooltip opens; an anchor with no layout boxes (a closed dialog) falls back to the trigger. Typestring Defaultundefined RequiredNo
size	"sm""md""lg"	"md"	Visual size variant.
wrap	boolean	true	Whether long content wraps. true caps the panel at 20rem and wraps to multiple lines; false sizes the panel to its text on a single line (no max width, white-space: nowrap).
open	boolean	false	Controls the open/closed state. Bindable in Svelte — useful for the 'manual' strategy.
children	Snippet<[{ 'data-tooltip-trigger': true }]>	undefined	Snippet that renders the trigger element. The tooltip wires hover/focus listeners to the node you attach the props to.

#Default

#Placement

#Wrap

#Group

#Inside a modal drawer

#Inside a popover

#Props

Default

Placement

Wrap

Group

Inside a modal drawer

Inside a popover

Props