Tooltip

Hover/focus tip

A short hint for a control whose purpose isn't obvious from its icon. Never put essential information or anything interactive in a tooltip; touch screens rarely show it. For richer content, Popover.

Basic

Save (⌘S)

Below

rich content, no delay

a link

focus me with Tab

<script setup lang="ts">
import { BlessButton, BlessTooltip } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessTooltip text="Save (⌘S)"><BlessButton>hover me</BlessButton></BlessTooltip>
    <BlessTooltip text="Below" placement="bottom"
      ><BlessButton variant="outline">bottom</BlessButton></BlessTooltip
    >
    <BlessTooltip placement="right" :delay="0">
      <template #content><b>rich</b> content, no delay</template>
      <BlessButton variant="ghost">right</BlessButton>
    </BlessTooltip>
    <BlessTooltip text="focus me with Tab"><a href="#">a link</a></BlessTooltip>
  </div>
</template>

Not inside <p>

The floating panel is a <div>. HTML closes a <p> when it meets a <div>, so a trigger placed inside a paragraph renders differently on the server and the client. Wrap with <span>/<div> instead.

• It shows on hover and on keyboard focus, and it describes the element inside it (the hint is read after the name). Esc hides it.
• The pointer can move onto the tip without it disappearing. An icon-only button still needs its own name; the tooltip is a description, not the label.

Usage

import { BlessTooltip } from "blessing-ui";

API

Props

Name	Type	Default	Description
text	string	—
placement	Placement	"top"
delay	number	400

Slots

Name	Scope	Description
default	—
content	—