使用

一些tooltip信息

<template>
  <c-tooltip content="一些tooltip信息">
    <c-button label="Hover Me" />
  </c-tooltip>
</template>

点击展开/收起代码

点击打开交互式编辑器

位置

top-start

top

top-end

right-start

right

right-end

bottom-start

bottom

bottom-end

left-start

left

left-end

我是一个来自于 top-start 位置的提示

<script setup>
import { ref } from 'vue'
const pos = ref('top-start')
const positions = [
  'top-start',
  'top',
  'top-end',
  'right-start',
  'right',
  'right-end',
  'bottom-start',
  'bottom',
  'bottom-end',
  'left-start',
  'left',
  'left-end',
].map(p => ({
  label: p,
  value: p
}))
</script>

<template>
  <c-radio-group
    :options="positions"
    v-model="pos"
  />
  <div text-center py-8>
    <c-tooltip :position="pos" :content="`我是一个来自于 ${pos} 位置的提示`">
      <c-button label="Hover me" />
    </c-tooltip>
  </div>
</template>

点击展开/收起代码

点击打开交互式编辑器

自定义内容

哇，可以使用任何元素作为自定义内容哦

<template>
  <c-tooltip
    position="right"
    trigger="click"
  >
    <c-button label="点我" />
    <template #popup>
      <div class="custom-content">
        哇，可以使用任何元素作为自定义内容哦
        <c-button
          rounded
          outlined
          label="自定义按钮"
        />
      </div>
    </template>
  </c-tooltip>
</template>

<style scoped>
.custom-content {
  white-space: nowrap;
  background: #333;
  padding: 12px;
  color: #fff;
}
</style>

点击展开/收起代码

点击打开交互式编辑器

触发方式

你好，世界

你好，世界

点击左侧按钮手动触发

你好，世界

<script setup>
import { ref } from 'vue'
const show = ref(false)

const toggleShow = () => {
  show.value = !show.value
}
</script>

<template>
  <div class="popups">
    <c-tooltip content="你好，世界">
      <c-button
        outlined
        rounded
        label="悬浮（默认）"
      />
    </c-tooltip>
    <c-tooltip
      trigger="click"
      content="你好，世界"
    >
      <c-button
        rounded
        label="点击"
      />
    </c-tooltip>
    <div>
      <c-button
        label="手动"
        @click="toggleShow"
      />
      <c-tooltip
        v-model:show="show"
        trigger="manual"
        content="你好，世界"
      >
        点击左侧按钮手动触发
      </c-tooltip>
    </div>
  </div>
</template>

<style scoped>
.popups {
  display: flex;
}
div + div {
  margin-left: 12px;
}
</style>

点击展开/收起代码

点击打开交互式编辑器

CTooltip API

Props

Slots

Events

content

string | number

默认值  ''

弹出的内容文字

position

CTooltipPosition

默认值  'top'

弹出位置

trigger

"hover" | "click" | "manual"

默认值  'hover'

触发方式

show

boolean

默认值  false

是否展示弹出内容，可以使用v-model:show，仅在trigger = 'manual'时可用