On this page

Tooltip

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    Add to library
  </TooltipContent>
</Tooltip>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
            <TooltipContent>
              Add to library
            </TooltipContent>
      </Tooltip>
    </>
  );
}

<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Hover me</button>
    </TooltipTrigger>
    <TooltipContent> Add to library </TooltipContent>
  </Tooltip>
</template>

<script lang="ts">
  import { Button } from "@/components/starwind/button";
  import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/starwind/tooltip";
</script>

<div class="flex items-center justify-center">
  <Tooltip>
    <TooltipTrigger>
      {#snippet child({ props, children })}
        <Button {...props} variant="outline">{@render children?.()}</Button>
      {/snippet}
      Hover me
    </TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</div>

Installation

pnpx starwind@latest add tooltip --framework astro

npx starwind@latest add tooltip --framework astro

yarn dlx starwind@latest add tooltip --framework astro

pnpx starwind@latest add tooltip --framework react

npx starwind@latest add tooltip --framework react

yarn dlx starwind@latest add tooltip --framework react

pnpx starwind@latest add tooltip --framework vue

npx starwind@latest add tooltip --framework vue

yarn dlx starwind@latest add tooltip --framework vue

pnpx starwind@latest add tooltip --framework svelte

npx starwind@latest add tooltip --framework svelte

yarn dlx starwind@latest add tooltip --framework svelte

Usage

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    Add to library
  </TooltipContent>
</Tooltip>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
            <TooltipContent>
              Add to library
            </TooltipContent>
      </Tooltip>
    </>
  );
}

<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Hover me</button>
    </TooltipTrigger>
    <TooltipContent> Add to library </TooltipContent>
  </Tooltip>
</template>

<script lang="ts">
  import { ButtonVariants } from "@/components/starwind/button";
  import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
</script>

<Tooltip>
  <TooltipTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        type="button"
        class={ButtonVariants.button({ variant: "outline" })}
      >
        Hover me
      </button>
    {/snippet}
  </TooltipTrigger>
  <TooltipContent>Add to library</TooltipContent>
</Tooltip>

Composition

Use a trigger and content inside the root:

Tooltip
├── TooltipTrigger
└── TooltipContent

Positioning

Control the position and alignment of the tooltip using the side and align props.

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Top</Button>
  </TooltipTrigger>
  <TooltipContent>
    Tooltip on top
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Right</Button>
  </TooltipTrigger>
  <TooltipContent side="right">
    Tooltip on right
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Bottom</Button>
  </TooltipTrigger>
  <TooltipContent side="bottom">
    Tooltip on bottom
  </TooltipContent>
</Tooltip>

<Tooltip>
  <TooltipTrigger>
    <Button variant="outline">Left</Button>
  </TooltipTrigger>
  <TooltipContent side="left">
    Tooltip on left
  </TooltipContent>
</Tooltip>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Top</Button>
        </TooltipTrigger>
        <TooltipContent>
          Tooltip on top
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Right</Button>
        </TooltipTrigger>
        <TooltipContent side="right">
          Tooltip on right
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Bottom</Button>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          Tooltip on bottom
        </TooltipContent>
      </Tooltip>

      <Tooltip>
        <TooltipTrigger>
          <Button variant="outline">Left</Button>
        </TooltipTrigger>
        <TooltipContent side="left">
          Tooltip on left
        </TooltipContent>
      </Tooltip>
    </>
  );
}

<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Top</button>
    </TooltipTrigger>
    <TooltipContent> Tooltip on top </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Right</button>
    </TooltipTrigger>
    <TooltipContent side="right"> Tooltip on right </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Bottom</button>
    </TooltipTrigger>
    <TooltipContent side="bottom"> Tooltip on bottom </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Left</button>
    </TooltipTrigger>
    <TooltipContent side="left"> Tooltip on left </TooltipContent>
  </Tooltip>
</template>

<script lang="ts">
  import { ButtonVariants } from "@/components/starwind/button";
  import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
</script>

<Tooltip>
  <TooltipTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        type="button"
        class={ButtonVariants.button({ variant: "outline" })}
      >
        Top
      </button>
    {/snippet}
  </TooltipTrigger>
  <TooltipContent>Tooltip on top</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        type="button"
        class={ButtonVariants.button({ variant: "outline" })}
      >
        Right
      </button>
    {/snippet}
  </TooltipTrigger>
  <TooltipContent side="right">Tooltip on right</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        type="button"
        class={ButtonVariants.button({ variant: "outline" })}
      >
        Bottom
      </button>
    {/snippet}
  </TooltipTrigger>
  <TooltipContent side="bottom">Tooltip on bottom</TooltipContent>
</Tooltip>
<Tooltip>
  <TooltipTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        type="button"
        class={ButtonVariants.button({ variant: "outline" })}
      >
        Left
      </button>
    {/snippet}
  </TooltipTrigger>
  <TooltipContent side="left">Tooltip on left</TooltipContent>
</Tooltip>

Delay

Customize the open and close delay using the openDelay and closeDelay props.

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<Tooltip openDelay={0} closeDelay={500}>
  <TooltipTrigger>
    <Button variant="outline">No open delay</Button>
  </TooltipTrigger>
  <TooltipContent>
    Instant tooltip
  </TooltipContent>
</Tooltip>

<Tooltip openDelay={1000}>
  <TooltipTrigger>
    <Button variant="outline">Slow open</Button>
  </TooltipTrigger>
  <TooltipContent>
    Opens after 1 second
  </TooltipContent>
</Tooltip>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Tooltip openDelay={0} closeDelay={500}>
        <TooltipTrigger>
          <Button variant="outline">No open delay</Button>
        </TooltipTrigger>
        <TooltipContent>
          Instant tooltip
        </TooltipContent>
      </Tooltip>

      <Tooltip openDelay={1000}>
        <TooltipTrigger>
          <Button variant="outline">Slow open</Button>
        </TooltipTrigger>
        <TooltipContent>
          Opens after 1 second
        </TooltipContent>
      </Tooltip>
    </>
  );
}

<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Tooltip :openDelay="0" :closeDelay="500">
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
        No open delay
      </button>
    </TooltipTrigger>
    <TooltipContent> Instant tooltip </TooltipContent>
  </Tooltip>

  <Tooltip :openDelay="1000">
    <TooltipTrigger>
      <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
        Slow open
      </button>
    </TooltipTrigger>
    <TooltipContent> Opens after 1 second </TooltipContent>
  </Tooltip>
</template>

<script lang="ts">
  import { ButtonVariants } from "@/components/starwind/button";
  import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
</script>

<Tooltip openDelay={0} closeDelay={500}>
  <TooltipTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        type="button"
        class={ButtonVariants.button({ variant: "outline" })}
      >
        No open delay
      </button>
    {/snippet}
  </TooltipTrigger>
  <TooltipContent>Instant tooltip</TooltipContent>
</Tooltip>
<Tooltip openDelay={1000}>
  <TooltipTrigger>
    {#snippet child({ props })}
      <button
        {...props}
        type="button"
        class={ButtonVariants.button({ variant: "outline" })}
      >
        Slow open
      </button>
    {/snippet}
  </TooltipTrigger>
  <TooltipContent>Opens after 1 second</TooltipContent>
</Tooltip>

Alignment

Control the alignment of the tooltip relative to its trigger using the align prop.

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
---

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Start</Button>
    </TooltipTrigger>
    <TooltipContent align="start">
      Aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Center</Button>
    </TooltipTrigger>
    <TooltipContent align="center">
      Aligned to center
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">End</Button>
    </TooltipTrigger>
    <TooltipContent align="end">
      Aligned to end
    </TooltipContent>
  </Tooltip>
</div>

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom Start</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="start">
      Bottom aligned to start
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>
      <Button variant="outline">Bottom End</Button>
    </TooltipTrigger>
    <TooltipContent side="bottom" align="end">
      Bottom aligned to end
    </TooltipContent>
  </Tooltip>
</div>

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <div className="flex justify-between w-[300px]">
        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Start</Button>
          </TooltipTrigger>
          <TooltipContent align="start">
            Aligned to start
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Center</Button>
          </TooltipTrigger>
          <TooltipContent align="center">
            Aligned to center
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">End</Button>
          </TooltipTrigger>
          <TooltipContent align="end">
            Aligned to end
          </TooltipContent>
        </Tooltip>
      </div>

      <div className="flex justify-between w-[300px]">
        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Bottom Start</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom" align="start">
            Bottom aligned to start
          </TooltipContent>
        </Tooltip>

        <Tooltip>
          <TooltipTrigger>
            <Button variant="outline">Bottom End</Button>
          </TooltipTrigger>
          <TooltipContent side="bottom" align="end">
            Bottom aligned to end
          </TooltipContent>
        </Tooltip>
      </div>
    </>
  );
}

<script setup lang="ts">
import { ButtonVariants } from "@/components/starwind/button";
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <div class="flex justify-between w-[300px]">
    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Start</button>
      </TooltipTrigger>
      <TooltipContent align="start"> Aligned to start </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">Center</button>
      </TooltipTrigger>
      <TooltipContent align="center"> Aligned to center </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">End</button>
      </TooltipTrigger>
      <TooltipContent align="end"> Aligned to end </TooltipContent>
    </Tooltip>
  </div>

  <div class="flex justify-between w-[300px]">
    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
          Bottom Start
        </button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="start"> Bottom aligned to start </TooltipContent>
    </Tooltip>

    <Tooltip>
      <TooltipTrigger>
        <button type="button" :class="ButtonVariants.button({ variant: 'outline' })">
          Bottom End
        </button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="end"> Bottom aligned to end </TooltipContent>
    </Tooltip>
  </div>
</template>

<script lang="ts">
  import { ButtonVariants } from "@/components/starwind/button";
  import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/starwind/tooltip";
</script>

<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      {#snippet child({ props })}
        <button
          {...props}
          type="button"
          class={ButtonVariants.button({ variant: "outline" })}
        >
          Start
        </button>
      {/snippet}
    </TooltipTrigger>
    <TooltipContent align="start">Aligned to start</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      {#snippet child({ props })}
        <button
          {...props}
          type="button"
          class={ButtonVariants.button({ variant: "outline" })}
        >
          Center
        </button>
      {/snippet}
    </TooltipTrigger>
    <TooltipContent align="center">Aligned to center</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      {#snippet child({ props })}
        <button
          {...props}
          type="button"
          class={ButtonVariants.button({ variant: "outline" })}
        >
          End
        </button>
      {/snippet}
    </TooltipTrigger>
    <TooltipContent align="end">Aligned to end</TooltipContent>
  </Tooltip>
</div>
<div class="flex justify-between w-[300px]">
  <Tooltip>
    <TooltipTrigger>
      {#snippet child({ props })}
        <button
          {...props}
          type="button"
          class={ButtonVariants.button({ variant: "outline" })}
        >
          Bottom Start
        </button>
      {/snippet}
    </TooltipTrigger>
    <TooltipContent side="bottom" align="start">Bottom aligned to start</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger>
      {#snippet child({ props })}
        <button
          {...props}
          type="button"
          class={ButtonVariants.button({ variant: "outline" })}
        >
          Bottom End
        </button>
      {/snippet}
    </TooltipTrigger>
    <TooltipContent side="bottom" align="end">Bottom aligned to end</TooltipContent>
  </Tooltip>
</div>

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Tooltip Trigger

Inherits span attributes.

Contains the following additional props:

Prop Type Default

asChild boolean true

Description: Merges the component behavior and props into its child element.
Classification: Primitive override
Primitive prop: tooltip.Trigger.asChild

Inherits div attributes. Omits `tabIndex` and `tabindex`.

Contains the following additional props:

Prop Type Default

disablePortal boolean false

Description: Keeps the public Portal wrapper inline instead of moving it to a target.
Classification: Wrapper prop

portalContainer string —

Description: Sets the CSS selector for the public Portal wrapper target.
Classification: Wrapper prop

positionerClass string —

Description: Adds classes to the generated floating positioner element.
Classification: Wrapper prop

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Tooltip.

Primitive API

Tooltip Primitive

Runtime API

Tooltip primitive: createTooltip from @starwind-ui/runtime/tooltip

Changelog

View version history v2.2.1 5 releases

v2.2.1

Vue Tooltip keeps its previous open state when an open or close action is canceled.
Vue Tooltip respects the app-provided open value when it is re-enabled.
Reduced background work when a React page uses multiple menus, tooltips, or other portals.
Fixed nested Svelte overlays inside a dialog appearing behind their parent or failing to receive clicks.
Fixed open content losing its position at the trigger when the React or Vue component updates.
Fixed nested overlays appearing behind their parent in Vue and Svelte. Overlays can now render under the document body; if custom CSS or DOM queries require them to stay inside a parent, set a portal container or add data-floating-root to that parent.
Disabling a tooltip now cancels a scheduled opening. Re-enabling it restores trigger interaction.
Fixed React 18 retaining removed popup elements when the parent component stays mounted.

v2.2.0

Added portalContainer and disablePortal to TooltipContent for custom portal targets and inline rendering.

v2.1.0

Added positionerClass to TooltipContent so the floating positioner can be styled directly.
Moved the default stacking level from the content to the positioner.

v2.0.2

Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

v2.0.0

Rebuilt Tooltip on Starwind Runtime for hover and focus timing, floating placement, and dismissal.
See the Tooltip Primitive for the underlying unstyled anatomy and behavior API.