zx-tooltip 文字提示组件

组件说明

zx-tooltip 是一个适用于 H5、小程序、App 的通用提示信息组件，支持多种位置、主题、触发方式、插槽内容等，参考了 Element Plus Tooltip 设计。

效果展示

支持上、下、左、右多种方向，支持 hover、click、focus 触发，支持自定义内容和主题。

使用方法

基本用法

<template>
  <view>
    <zx-tooltip content="这是一条提示信息">
      <button>悬停显示提示</button>
    </zx-tooltip>
  </view>
</template>

主题

<template>
  <view>
    <zx-tooltip content="深色主题" effect="dark">
      <button>深色</button>
    </zx-tooltip>
    <zx-tooltip content="浅色主题" effect="light">
      <button>浅色</button>
    </zx-tooltip>
  </view>
</template>

多行/自定义内容

<template>
  <zx-tooltip placement="top">
    <template #content>
      <view>多行内容<br />第二行</view>
    </template>
    <button>自定义内容</button>
  </zx-tooltip>
</template>

触发方式

<template>
  <zx-tooltip content="点击显示" trigger="click">
    <button>点击显示</button>
  </zx-tooltip>
  <zx-tooltip content="聚焦显示" trigger="focus">
    <input placeholder="聚焦显示提示" />
  </zx-tooltip>
</template>

属性

| 属性名 | 说明 | 类型 | 默认值 | | -------------- | ------------------------ | --------- | -------- | | content | 显示的内容 | String | '' | | rawContent | 内容是否为 HTML | Boolean | false | | placement | 出现位置(top/bottom/left/right) | String | top | | effect | 主题(dark/light) | String | dark | | disabled | 是否禁用 | Boolean | false | | showArrow | 是否显示箭头 | Boolean | true | | trigger | 触发方式(hover/click/focus) | String | hover | | showAfter | 显示延迟(ms) | Number | 0 | | hideAfter | 隐藏延迟(ms) | Number | 200 | | autoClose | 自动关闭(ms) | Number | 0 | | offset | 偏移距离(rpx) | Number | 12 | | popperClass | 自定义类名 | String | '' | | modelValue | 控制显示/隐藏 | Boolean | - |

事件

| 事件名 | 说明 | 回调参数 | | ------------------ | -------------- | -------- | | update:modelValue | 显示/隐藏变化 | Boolean | | show | 显示时触发 | - | | hide | 隐藏时触发 | - |

插槽

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

注意事项

• 组件不依赖浏览器特有 DOM，适配 H5、小程序、App。
• 由于平台限制，定位仅支持简单偏移，复杂场景请自定义样式。

贡献

如有建议或问题，欢迎提 issue。