ExUI

Appearance

Tooltip 文字提示 ​

简单的文字提示气泡框，鼠标悬停时显示。带有霓虹发光效果的赛博朋克主题提示组件。

基础用法 ​

最简单的用法，鼠标悬停时显示提示。

vue
<template>
  <ExTooltip content="这是一条提示信息">
    <ExButton>悬停显示</ExButton>
  </ExTooltip>
</template>

不同位置 ​

通过 placement 属性可以设置提示的显示位置，支持 12 个方向。

vue
<template>
  <ExTooltip content="Top" placement="top">
    <ExButton>上边</ExButton>
  </ExTooltip>
  
  <ExTooltip content="Bottom" placement="bottom">
    <ExButton>下边</ExButton>
  </ExTooltip>
  
  <ExTooltip content="Left" placement="left">
    <ExButton>左边</ExButton>
  </ExTooltip>
  
  <ExTooltip content="Right" placement="right">
    <ExButton>右边</ExButton>
  </ExTooltip>
</template>

不同主题 ​

通过 effect 属性可以设置不同的主题样式。

vue
<template>
  <ExTooltip content="深色主题提示" effect="dark">
    <ExButton>深色主题</ExButton>
  </ExTooltip>
  
  <ExTooltip content="浅色主题提示" effect="light">
    <ExButton>浅色主题</ExButton>
  </ExTooltip>
</template>

触发方式 ​

通过 trigger 属性可以设置不同的触发方式。

vue
<template>
  <ExTooltip content="鼠标悬停触发" trigger="hover">
    <ExButton>悬停触发</ExButton>
  </ExTooltip>
  
  <ExTooltip content="点击触发" trigger="click">
    <ExButton>点击触发</ExButton>
  </ExTooltip>
  
  <ExTooltip content="聚焦触发" trigger="focus">
    <ExButton>聚焦触发</ExButton>
  </ExTooltip>
</template>

延迟显示/隐藏 ​

通过 open-delay 和 close-delay 属性可以设置延迟时间。

vue
<template>
  <ExTooltip content="延迟 500ms 显示" :open-delay="500">
    <ExButton>延迟显示</ExButton>
  </ExTooltip>
  
  <ExTooltip content="延迟 500ms 隐藏" :close-delay="500">
    <ExButton>延迟隐藏</ExButton>
  </ExTooltip>
</template>

禁用状态 ​

通过 disabled 属性可以禁用提示。

vue
<template>
  <ExTooltip content="这是一条提示" :disabled="false">
    <ExButton>启用提示</ExButton>
  </ExTooltip>
  
  <ExTooltip content="这是一条提示" :disabled="true">
    <ExButton>禁用提示</ExButton>
  </ExTooltip>
</template>

手动控制 ​

通过 v-model 可以手动控制提示的显示和隐藏。

vue
<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <ExButton @click="visible = true">显示</ExButton>
  <ExButton @click="visible = false">隐藏</ExButton>
  
  <ExTooltip content="手动控制的提示" v-model="visible">
    <ExButton>目标元素</ExButton>
  </ExTooltip>
</template>

自定义内容 ​

通过 content 插槽可以自定义提示内容。

vue
<template>
  <ExTooltip>
    <template #content>
      <div>
        <div style="font-weight: bold;">自定义标题</div>
        <div>这是自定义的提示内容</div>
      </div>
    </template>
    <ExButton>自定义内容</ExButton>
  </ExTooltip>
</template>

赛博朋克主题示例 ​

展示赛博朋克场景中的提示应用。

vue
<template>
  <ExTooltip placement="top">
    <template #content>
      <div>
        <div style="font-weight: bold;">⚔️ 传说之剑</div>
        <div>攻击力: +150</div>
        <div>暴击率: +25%</div>
        <div>稀有度: 传说</div>
      </div>
    </template>
    <ExButton type="primary">武器</ExButton>
  </ExTooltip>
</template>

API ​

Tooltip Props ​

参数说明类型默认值
content显示的内容string—
placement出现位置'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end''top'
trigger触发方式'hover' | 'click' | 'focus' | 'hover-focus''hover'
effect主题'dark' | 'light''dark'
show-arrow是否显示箭头booleantrue
disabled是否禁用booleanfalse
offset偏移量（像素）number12
transition过渡动画名称string'ex-tooltip-fade'
open-delay延迟显示（毫秒）number0
close-delay延迟隐藏（毫秒）number200
custom-class自定义类名string—
z-index层级number2000
v-model手动控制显示boolean—
aria-label无障碍标签string—

Tooltip Events ​

事件名说明类型
show显示时触发() => void
hide隐藏时触发() => void

Tooltip Slots ​

插槽名说明
default触发元素
content自定义提示内容

Tooltip Methods ​

方法名说明类型
show显示提示() => void
hide隐藏提示() => void
updatePosition更新位置() => void

无障碍支持 ​

  • 使用 role="tooltip" 标记提示内容
  • 完整的 ARIA 属性支持
  • 支持键盘导航（focus 触发）
  • 支持屏幕阅读器

主题定制 ​

可以通过 CSS 变量自定义提示样式：

css
:root {
  --ex-tooltip-bg-dark: rgba(0, 0, 0, 0.9);
  --ex-tooltip-bg-light: var(--ex-color-white);
  --ex-tooltip-border: var(--ex-color-primary);
  --ex-tooltip-shadow: 0 0 15px rgba(41, 171, 226, 0.3);
}