Tootip

常用于展示鼠标 hover 时的提示信息.

基础用法

在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果.

使用 content 属性来决定 hover 时的提示信息. 由 placement 属性决定展示效果: placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为bottom.如 placement="left-end",则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐.

<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
</script>

<template>
  <div class="content">
    <div class="left flex">
      <Tooltip placement="left-start" content="Left Top prompts info">
        <Button>left-start</Button>
      </Tooltip>

      <Tooltip placement="left" class="mt-20" content="Left prompts info">
        <Button>left</Button>
      </Tooltip>

      <Tooltip placement="left-end" class="mt-20" content="Left End prompts info">
        <Button>left-end</Button>
      </Tooltip>
    </div>

    <div class="center">
      <div class="top">
        <Tooltip placement="top-start" content="Top Start prompts info">
          <Button>top-start</Button>
        </Tooltip>

        <Tooltip placement="top" style="margin: 0 20px" content="Top prompts info">
          <Button>top</Button>
        </Tooltip>

        <Tooltip placement="top-end" content="Top End prompts info">
          <Button>top-end</Button>
        </Tooltip>
      </div>
      <div class="bottom">
        <Tooltip placement="bottom-start" content="Bottom Top prompts info">
          <Button>bottom-start</Button>
        </Tooltip>

        <Tooltip placement="bottom" style="margin: 0 20px" content="Bottom prompts info">
          <Button>bottom</Button>
        </Tooltip>

        <Tooltip placement="bottom-end" content="Bottom End prompts info">
          <Button>bottom-end</Button>
        </Tooltip>
      </div>
    </div>

    <div class="right flex">
      <Tooltip placement="right-start" content="Right Top prompts info">
        <Button>right-start</Button>
      </Tooltip>

      <Tooltip placement="right" class="mt-20" content="Right prompts info">
        <Button>right</Button>
      </Tooltip>

      <Tooltip placement="right" class="mt-20" content="Right End prompts info<">
        <Button>right-end</Button>
      </Tooltip>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mt-20 {
  margin-top: 20px;
}
.content {
  display: flex;
  justify-content: space-between;
  text-align: center;

  .center {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>

手动控制

xin-tooltip支持手动控制Tooltip组件的显示和隐藏.

首先,确保您已经将Tooltip设置为manual模式,否则无法实现手动控制.

确保开启manual模式后,通过Ref获取Tooltip组件实例,实例中存有showTooltip与closeTooltip,分别是显示与隐藏方法.

<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
import { ref } from 'vue'
import type { TooltipInstance } from '../../../src/components/Tooltip/types'

const toggleState = ref<boolean>(false)
const tooltipRef = ref<TooltipInstance | null>(null)

const handleClick = () => {
  toggleState.value = !toggleState.value
  if (tooltipRef.value && toggleState.value) {
    tooltipRef.value?.showTooltip()
  } else {
    tooltipRef.value?.closeTooltip()
  }
}
</script>

<template>
  <div>
    <Tooltip ref="tooltipRef" placement="left" manual>
      <Button type="primary">xin</Button>

      <template #content>
        <div>xinxin OvO</div>
      </template>
    </Tooltip>

    <div class="controlTooltip">
      <Button round @click="handleClick">点我控制Tolltip显示与隐藏</Button>
    </div>
  </div>
</template>

<style scoped>
.controlTooltip {
  margin-top: 20px;
}
</style>

更多内容的文字提示

展示多行文本或者是设置文本内容的格式.

用具名 slot content,替代tooltip中的content属性.

<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
</script>

<template>
  <div>
    <Tooltip placement="top">
      <Button type="primary">xin-design</Button>

      <template #content>
        <div>hello</div>
        <h5>xin-design</h5>
      </template>
    </Tooltip>
  </div>
</template>

自定义动画

Tooltip 支持自定义动画,你可以根据需要自行设置所需的动画方法.

<script setup lang="ts">
import Tooltip from '../../../src/components/Tooltip/Tooltip.vue'
import Button from '../../../src/components/Button/Button.vue'
</script>

<template>
  <!-- 修改动画请自行查看Tooltip组件中style.css与Tooltip.vue -->
  <div>
    <Tooltip placement="top">
      <Button plain type="danger">transition</Button>

      <template #content>
        <div>transition</div>
        <h5>xin-design</h5>
      </template>
    </Tooltip>
  </div>
</template>

Tooltip API

Tooltip 属性

名称	说明	类型	默认值
content	显示的内容,也可被 slot#content 覆盖	string	''
transition	动画名称	string	fade
placement	Tooltip 组件出现的位置	enum - top-start top top-end left-start left left-end right-start right right-end bottom-start bottom bottom-end	bottom
popper-options	popper.js 参数	Object请参考 popper.js 文档	{}
trigger	如何触发 Tooltip	enum - hover click	hover
title	图标标题	string	-

Slots

插槽名	说明
default	Tooltip 触发 & 引用的元素
content	自定义内容

Exposes

名称	详情	类型
popperRef	xin-popper 组件实例	Object
showTooltip	showTooltip方法控制 xin-tooltip 显示状态	Function
closeTooltip	showTooltip方法控制 xin-tooltip 显示状态	Function