@tanzhenxing/zx-tooltip NPM

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	-