QuestionTip 快捷提示

基于 antd Tooltip/Popover 封装的快捷提示组件，支持字符串、字符串数组形式的提示内容。（注：本组件意在快速添加提示，如果你需要自定义复杂的提示，请结合a-tooltip自行封装。）

用法示例

基础用法

标签文本

多行提示

标签文本

白色主题

标签文本

自定义位置或样式

标签文本

自定义触发器

复制代码

查看代码

<template>
  <div class="demo-wrapper">
      <div class="demo-item">
        <h3>基础用法</h3>
        <s-question-tip
          label="标签文本"
          tip="这是一段提示文本这是一段提示文本这是一段提示文本这是一段提示文本"
        />
      </div>

      <div class="demo-item">
        <h3>多行提示</h3>
        <s-question-tip
          label="标签文本"
          :tip="['第一行提示文本', '第二行提示文本', '第三行提示文本']"
        />
      </div>

      <div class="demo-item">
        <h3>白色主题</h3>
        <s-question-tip
          label="标签文本"
          tip="这是一段提示文本"
          theme="white"
        />
      </div>

      <div class="demo-item">
        <h3>自定义位置或样式</h3>
        <s-question-tip
          label="标签文本"
          tip="这是一段提示文本"
          placement="bottom"
          :overlayInnerStyle="{ backgroundColor: 'red', color: 'green' }"
        />
      </div>

      <div class="demo-item">
        <h3>自定义触发器</h3>
        <s-question-tip
          tip="我是自定义提示"
        >
          <AlertOutlined />
        </s-question-tip>
      </div>
    </div>
</template>

API

属性

属性名	说明	类型	默认值
label	标签文本	string	''
tip	提示内容，支持字符串或字符串数组	string | string[]	[]
placement	提示框位置	'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'	'right'
theme	提示框主题	'dark' | 'white'	'dark'
blocked	是否块级显示	boolean	false
cardStyle	提示框样式	object	{}

antv的tooltip剩余 props 均能使用。