ZTooltip

• 简易的信息提示框。
• 何时使用：当某个页面或地方需要向用户显示重要或非重要等提示性信息时。
• 版本要求 >= 1.2.1

基础用法

提示文本

鼠标指向我时，会显示提示。

<template>
  <div style="margin-top: 60px">
    <z-tooltip title="提示文本">
      鼠标指向我时，会显示提示。
    </z-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ZTooltip } from "@d7ee/z-base-ui";
</script>

位置

位置共有5个方向，通过placement 控制。

提示文本

提示文本

提示文本

提示文本

提示文本

<template>
  <div class="tipBox">
    <z-tooltip :auto-adjust-position="false" placement="top" title="提示文本">
      <z-button>TOP</z-button>
    </z-tooltip>
    <z-tooltip placement="bottom" title="提示文本">
      <z-button>Bottom</z-button>
    </z-tooltip>
    <z-tooltip :auto-adjust-position="false" placement="left" title="提示文本">
      <z-button>Left</z-button>
    </z-tooltip>
    <z-tooltip placement="right" title="提示文本">
      <z-button>Right</z-button>
    </z-tooltip>
    <z-tooltip placement="inner" title="提示文本">
      <z-button>inner</z-button>
    </z-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ZTooltip, ZButton } from "@d7ee/z-base-ui";
</script>

<style lang="less" scoped>
.tipBox {
  width: 300px;
  margin-left: 80px;
  margin-top: 40px;
  display: flex;
  gap: 12px;
}
</style>

色彩

使用container-style可以自定义样式内容。

提示文本

提示文本

提示文本

提示文本

提示文本

<template>
  <div class="custom">
    <z-tooltip title="提示文本" :container-style="{background: 'pink'}">
      <z-button>pink</z-button>
    </z-tooltip>
    <z-tooltip title="提示文本" :container-style="{background: 'red'}">
      <z-button>red</z-button>
    </z-tooltip>
    <z-tooltip title="提示文本" :container-style="{background: 'orange'}">
      <z-button>orange</z-button>
    </z-tooltip>
    <z-tooltip title="提示文本" :container-style="{background: 'green'}">
      <z-button>green</z-button>
    </z-tooltip>
    <z-tooltip title="提示文本" :container-style="{background: '#f50'}">
      <z-button>#f50</z-button>
    </z-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ZTooltip, ZButton } from "@d7ee/z-base-ui";
</script>

<style>
.custom {
  display: flex;
  align-content: center;
  grid-gap: 12px;
}
</style>

API 属性

属性名	说明	类型	默认值
title	内容	string | slot	-
placement	tooltip位置	top | left | right | bottom | inner	-
autoAdjustPosition	自动调整位置	boolean	true
containerStyle	容器样式	object	—
isShow	常在	boolean	false
isClick	浮层可被点击	boolean	true

slot 插槽

slotName	说明	参数
title	自定义内容