Tooltip 文字提示

基础用法

<template>
  <div>
    <plv-tooltip content="这是一段文字">
      <span class="plv-admin-icon-hint-circle-fill"></span>
    </plv-tooltip>
  </div>
</template>

显示代码

注意，tooltip 不建议使用 v-if 来判断，用到的场景使用 v-show。

插槽用法

<template>
  <div>
    <plv-tooltip>
      <span class="plv-admin-icon-hint-circle-fill"></span>
      <template slot="content">这是slot的文字</template>
    </plv-tooltip>
  </div>
</template>

显示代码

主题

<template>
  <plv-tooltip content="这是一段文字" theme="dark">
    <span class="plv-admin-icon-hint-circle-fill"></span>
  </plv-tooltip>
</template>

显示代码

该组件与 Popper 不同，Tooltip 的默认插槽会直接渲染，不会被外层标签包裹，所以默认插槽下只能有一层都dom对象。

Attributes

参数	说明	类型	可选值	默认值
content	tooltip内的内容	String	-	-
placement	出现位置	String	top/bottom/left/right	bottom
custom-class	自定义 tooltip 的 className	String	-	-
disabled	是否禁用toolTip	Boolean	-	false
listen-event	是否监听mouse事件	Boolean	-	true
theme	主题	String	dark	-
disappear-time	鼠标离开后消失延迟时间	Number	-	200

Slots

name	说明
—	触发内容
content	Tooltip的内容