Tooltip

A lightweight and flexible component for displaying contextual tooltips.

Basic Usage

Default tooltip usage with hover trigger and bottom placement. Demonstrates how to wrap content and show simple text tooltips.

<script setup >
import Tooltip from '@/components/tooltip/tooltip.vue'
import Button from '@/components/Button/Button.vue'

</script>
<template>
    <Tooltip content="Hello Tooltip">
        <Button>Hover me</Button>
    </Tooltip>
</template>

Placement

Controlled by the placement prop. Format: [direction]-[alignment]. Directions: top, bottom, left, right; Alignments: start, end (default is centered).

<script setup >
import Tooltip from '@/components/tooltip/tooltip.vue'
import Button from '@/components/Button/Button.vue'

</script>
<template>
    <div class="demo-placement">
        <Tooltip content="Top" placement="top">
            <Button style="width: 100px;height: 100px;">Top</Button>
        </Tooltip>
        <Tooltip content="Top-Start" placement="bottom-start">
            <Button style="width: 100px;height: 100px;">Top Start</Button>
        </Tooltip>
        <Tooltip content="Right-End" placement="right-end">
            <Button style="width: 100px;height: 100px;">Right End</Button>
        </Tooltip>
    </div>
</template>

<style scoped>
.demo-placement {
    display: flex;
    gap: 20px; /* 按钮间距 */
    padding: 20px;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
</style>

Trigger

Determines how the tooltip is activated. Use the trigger prop to choose between hover or click.

<script setup >
import Tooltip from '@/components/tooltip/tooltip.vue'
import Button from '@/components/Button/Button.vue'

</script>
<template>
    <div class="demo-trigger">
        <Tooltip content="Click to toggle" trigger="click">
            <Button>Click me</Button>
        </Tooltip>
        <Tooltip content="Hover to toggle" trigger="hover">
            <Button>Hover me</Button>
        </Tooltip>
    </div>
</template>

<style scoped>
.demo-trigger {
    display: flex;
    gap: 20px;
    /* 按钮间距 */
    padding: 20px;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
</style>

Content Slot

Customize tooltip content using the content slot. Supports plain text, HTML, or VNode content.

<script setup>
import Tooltip from '@/components/tooltip/tooltip.vue'
import Button from '@/components/Button/Button.vue'

</script>
<template>
    <Tooltip>
      <template #default>
        <Button>Hover me</Button>
      </template>
      <template #content>
        <strong>This is <i>rich</i> content</strong>
      </template>
    </Tooltip>
  </template>

Manual Control

Enable manual mode to control tooltip visibility programmatically via show() and hide() methods using ref.

<script setup >
import Tooltip from '@/components/tooltip/tooltip.vue'
import Button from '@/components/Button/Button.vue'
import { ref } from 'vue'
const tooltipRef = ref()
</script>
<template>
    <Tooltip ref="tooltipRef" content="Manual control" manual>
      <Button @click="tooltipRef?.show()">Show</Button>
    </Tooltip>
  </template>

Transition

Customize tooltip animations using the transition prop. Accepts a CSS transition name (e.g., fade, slide, etc).

<script setup >
import Tooltip from '@/components/tooltip/tooltip.vue'
import Button from '@/components/Button/Button.vue'

</script>
<template>
    <Tooltip content="Fade Transition" transition="fade">
      <Button>Hover me</Button>
    </Tooltip>
  </template>

Open & Close Delay

Use openDelay and closeDelay to delay the tooltip's appearance or disappearance in milliseconds.

<script setup >
import Tooltip from '@/components/tooltip/tooltip.vue'
import Button from '@/components/Button/Button.vue'

</script>
<template>
    <Tooltip content="I appear with delay" :open-delay="2000" :close-delay="2000">
        <Button>Hover slowly</Button>
    </Tooltip>
</template>

API

Tooltip Props

Name	Description	Type	Default
placement	Tooltip position	top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end	bottom
trigger	Trigger method	'hover' | 'click'	'hover'
manual	Manual control mode	boolean	false
transition	Transition animation name	string	'fade'
openDelay	Delay before showing (ms)	number	0
closeDelay	Delay before hiding (ms)	number	0
popperOptions	Popper.js configuration	Partial<Options> (import from @popperjs/core)	{}

Events

Name	Description	Parameters
visible-change	Emitted when visibility changes	(visible: boolean)

Slots

Slot Name	Description
default	Trigger element
content	Custom tooltip content

Instance Methods

// Access via component ref
tooltipRef.value?.show()  // Show tooltip
tooltipRef.value?.hide()  // Hide tooltip