Tooltip 文本提示

用于以各种方式展示提示文本 ——该组件泛用性一般，对策性极强 (大杯)

基本使用

该组件是基于popperjs插件的二次封装，支持popperjs的所有配置（通过popperOptions传入），popperjs说明具体可查看popperjs官网；
有9个基本方向可供提示文本展示，并可以传入trigger属性切换触发方式；

基本使用

<!-- 文本提示基础使用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpTooltip, UtpButton } from '@will1919/utopia-ui';

</script>

<template>
  <div>
    <div class="top-group-box">
      <utp-tooltip content="上方偏左" placement="top-start">
        <utp-button plain>文本提示上方偏左</utp-button>
      </utp-tooltip>

      <utp-tooltip content="正上方" placement="top">
        <utp-button plain>文本提示正上方</utp-button>
      </utp-tooltip>
      <utp-tooltip content="上方偏右" placement="top-end">
        <utp-button plain>文本提示上方偏右</utp-button>
      </utp-tooltip>
    </div>
    <div class="left-and-right-group-box">
      <div class="left-group-box">
        <utp-tooltip class="need-top" content="左侧偏上" placement="left-start">
          <utp-button plain>文本提示左侧偏上</utp-button>
        </utp-tooltip>
        <utp-tooltip class="need-top" content="正左方" placement="left">
          <utp-button plain>文本提示正左方</utp-button>
        </utp-tooltip>
        <utp-tooltip class="need-top" content="左侧偏下" placement="left-end">
          <utp-button plain>文本提示左侧偏下</utp-button>
        </utp-tooltip>
      </div>
      <div class="trigger-click-box">
        <utp-tooltip class="trigger-click" content="点击触发" trigger="click" placement="top">
          <utp-button plain>点击触发</utp-button>
        </utp-tooltip>
      </div>
      <div class="right-group-box">
        <utp-tooltip class="need-top" content="右侧偏上" placement="right-start">
          <utp-button plain>文本提示右侧偏上</utp-button>
        </utp-tooltip>
        <utp-tooltip class="need-top" content="正右方" placement="right">
          <utp-button plain>文本提示正右方</utp-button>
        </utp-tooltip>
        <utp-tooltip class="need-top" content="右侧偏下" placement="right-end">
          <utp-button plain>文本提示右侧偏下</utp-button>
        </utp-tooltip>
      </div>
    </div>
    <div class="bottom-group-box">
      <utp-tooltip content="下方偏左" placement="bottom-start">
        <utp-button plain>文本提示下方偏左</utp-button>
      </utp-tooltip>

      <utp-tooltip content="正下方" placement="bottom">
        <utp-button plain>文本提示正下方</utp-button>
      </utp-tooltip>
      <utp-tooltip content="下方偏右" placement="bottom-end">
        <utp-button plain>文本提示下方偏右</utp-button>
      </utp-tooltip>
    </div>
  </div>
</template>

<style scoped>
.top-group-box,
.bottom-group-box {
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
}

.bottom-group-box {
  margin-top: 20px;
}

.left-and-right-group-box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.trigger-click-box {
  display: flex;
  align-items: center;
}

.left-group-box,
.right-group-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.need-top {
  margin-top: 10px;
}

.need-top:first-child {
  margin-top: 0;
}
</style>

popperjs配置

修改popperjs配置示例，同时传入placement和options中的placement时，options的级别更高

popperjs配置

<!-- 文本提示配置 -->
<script setup>
// 导入路径请参考安装部分
import { UtpTooltip, UtpButton } from '@will1919/utopia-ui';
import { ref } from 'vue'

const options = ref({ placement: 'left-end' })
</script>

<template>
  <div>
    <utp-tooltip placement="top" :popper-options="options" content="options级别更高">
      <utp-button plain>修改popperjs配置</utp-button>
    </utp-tooltip>
  </div>
</template>

自定义显示内容

通过content插槽自定义显示内容的样式

自定义提示内容

<!-- 文本提示自定义提示内容 -->
<script setup>
// 导入路径请参考安装部分
import { UtpTooltip, UtpButton } from '@will1919/utopia-ui';

</script>

<template>
  <div>
    <utp-tooltip placement="right" content="options级别更高">
      <utp-button plain>自定义提示内容</utp-button>
      <template #content>
        <i class="my-contnet">加粗倾斜文本提示</i>
      </template>
    </utp-tooltip>
  </div>
</template>

<style scoped>
.my-contnet {
  font-weight: bold;
}
</style>

支持手动控制触发和关闭

通过content插槽自定义显示内容的样式

手动

提示显示区域

<!-- 文本提示手动控制显示 -->
<script setup>
// 导入路径请参考安装部分
import { UtpTooltip, UtpButton } from '@will1919/utopia-ui';
import { ref } from 'vue';

const tooltipRef = ref(null)

const openTooltip = () => {
  tooltipRef.value.show()
}
const closeTooltip = () => {
  tooltipRef.value.hide()
}
</script>

<template>
  <div>
    <utp-tooltip ref="tooltipRef" placement="top" content="手动控制的提示文本" manual>
      <div class="tooltip-area">
        <i>提示显示区域</i>
      </div>
    </utp-tooltip>
    <div class="tooltip-btn">
      <utp-button @click="openTooltip">显示提示文本</utp-button>
      <utp-button @click="closeTooltip"  type="error">隐藏提示文本</utp-button>
    </div>
  </div>
</template>

<style scoped>
.tooltip-area {
  width: 100px;
  height: 100px;
  background-color: #e5e5e5;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.tooltip-btn {
  margin-top: 20px;
}
</style>

Tooltip API

属性

属性	说明	类型	默认值
content	设置提示文本内容	string	—
trigger	设置提示文本触发方式	hover | click	hover
placement	设置提示文本显示方向	Placement: 参考基本使用部分	bottom
manual	设置手动模式	boolean	false
popperOptions	popperJs配置项	object	—
transition	设置动画(一般不需要传入)	string	fade
openDelay	设置显示延迟时间	number	0
closeDelay	设置隐藏延迟时间	number	0

事件

事件名称	说明	事件类型
visible-change	切换显示状态的回调函数	(isOpen: boolean) => void
click-outside	点击其他地方的回调函数	(isClick: boolean) => void

Exposes

名称	说明	类型
show	显示文本提示方法	() => void
hide	隐藏文本提示方法	() => void