介绍

本文档主要用于描述 ShadcnTooltip 组件的一些特性和用法。

用法

查看代码

<template>
    <ShadcnTooltip content="This is a tooltip">
        <ShadcnButton>Hover</ShadcnButton>
    </ShadcnTooltip>
</template>

<script setup lang="ts">
</script>

延迟 (delay)

查看代码

<template>
    <ShadcnTooltip content="This is a tooltip" :delay="500">
        <ShadcnButton>Hover</ShadcnButton>
    </ShadcnTooltip>
</template>

<script setup lang="ts">
</script>

位置 (position)

查看代码

<template>
    <ShadcnTooltip content="Position" position="top">
        <ShadcnButton>Top</ShadcnButton>
    </ShadcnTooltip>
    <ShadcnTooltip content="Position" position="bottom">
        <ShadcnButton>Bottom</ShadcnButton>
    </ShadcnTooltip>
    <ShadcnTooltip content="Position" position="left">
        <ShadcnButton>Left</ShadcnButton>
    </ShadcnTooltip>
    <ShadcnTooltip content="Position" position="right">
        <ShadcnButton>Right</ShadcnButton>
    </ShadcnTooltip>
</template>

<script setup lang="ts">
</script>

箭头 (arrow)

查看代码

<template>
    <ShadcnTooltip content="Hello Shadcn UI" arrow>
        <ShadcnButton>Arrow</ShadcnButton>
    </ShadcnTooltip>
    <ShadcnTooltip content="Hello Shadcn UI" :arrow="false">
        <ShadcnButton>No Arrow</ShadcnButton>
    </ShadcnTooltip>
</template>

<script setup lang="ts">
</script>

宽度 (width)

查看代码

<template>
    <ShadcnTooltip content="Steve Jobs (English: Steve Jobs) is an American entrepreneur, marketer and inventor. He is one of the co-founders of Apple and has served as chairman and CEO. He is also the founder and CEO of NeXT and the founder and former CEO of Pixar Animation. He was a member of the board of directors of the Walt Disney Company in 2006. The place where Apple's press conference was held in September 2017 was named Steve Jobs Theater after him." width="200">
        <ShadcnButton>Hover</ShadcnButton>
    </ShadcnTooltip>
</template>

<script setup lang="ts">
</script>

提示 (Tooltip) 属性

提示 (Tooltip) 插槽