Tooltip

Import

import { Tooltip } from "@dr-max/ui/tooltip"

The entry carries its own precompiled CSS — no extra style imports needed.

Usage

The anchor goes into the default slot and the bubble text into the content prop. Uncontrolled by default: hovering or focusing the anchor shows the bubble (the demos below use default-open so the bubble is visible without hovering):

<script setup lang="ts">
import { Button } from "@dr-max/ui/button"
import { Tooltip } from "@dr-max/ui/tooltip"
</script>

<template>
  <Tooltip content="Free delivery for orders over 999 Kč">
    <Button variant="secondary">Hover me</Button>
  </Tooltip>
</template>

Variants

The bubble is dark by default — switch to light on dark or busy backgrounds:

<template>
  <Tooltip content="Dark bubble">
    <Button variant="secondary">Dark</Button>
  </Tooltip>
  <Tooltip content="Light bubble" variant="light">
    <Button variant="secondary">Light</Button>
  </Tooltip>
</template>

Placement

side (top, right, bottom, left) picks the preferred side of the anchor and flips automatically on viewport collisions, align (start, center, end) aligns the bubble against the anchor, and side-offset sets the distance in pixels:

<template>
  <Tooltip content="Top">
    <Button variant="secondary">Top</Button>
  </Tooltip>
  <Tooltip content="Right" side="right">
    <Button variant="secondary">Right</Button>
  </Tooltip>
  <Tooltip content="Bottom" side="bottom">
    <Button variant="secondary">Bottom</Button>
  </Tooltip>
  <Tooltip content="Left" side="left">
    <Button variant="secondary">Left</Button>
  </Tooltip>
</template>

Controlled state

Bind open when the parent should own the visibility — hover is then ignored. The tooltip emits update:open and close:

<script setup lang="ts">
import { Button } from "@dr-max/ui/button"
import { Tooltip } from "@dr-max/ui/tooltip"
import { ref } from "vue"

const open = ref(false)
</script>

<template>
  <Tooltip :open="open" content="Saved to favourites" @update:open="open = $event">
    <Button variant="secondary" @click="open = !open">Save</Button>
  </Tooltip>
</template>

Rich content

The #content slot takes precedence over the content prop when the bubble needs markup:

<template>
  <Tooltip>
    <template #content>
      Orders over <strong>999 Kč</strong> ship free
    </template>
    <Button variant="secondary">Delivery info</Button>
  </Tooltip>
</template>

When the tooltip is rendered inside a modal, set inside-modal to suppress close events from outside interactions.

Playground

<script setup lang="ts">
import { Button } from '@dr-max/ui/button'
import { Tooltip } from '@dr-max/ui/tooltip'
</script>

<template>
  <Tooltip content="Free delivery for orders over 999 Kč" variant="dark" side="top" align="center" :side-offset="8" default-open>
    <Button variant="secondary">Hover me</Button>
  </Tooltip>
</template>