Tooltip 提示

文本提示信息，对 el-tooltip 进行了二次封装，支持文本超出时提示，未超出时不提示，且支持使用原生 HTML title 提示。

基本用法

文本宽度:

文本超出时提示，未超出时不提示

点击查看代码

<template>
  <s-form showColon>
    <s-form-item label="文本宽度">
      <el-slider v-model="textWidth" :min="235" :max="255" />
    </s-form-item>
  </s-form>

  <s-tooltip content="文本超出时提示，未超出时不提示" :style="{ width: `${ textWidth }px`, background: '#f2f6fc' }" />
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const textWidth = ref<number>(230);
</script>

提示主题

Dark Theme

Light Theme

Customized Theme

点击查看代码

<template>
  <el-space :size="20">
    <s-tooltip content="Dark Theme" style="width: 5em;" />
    <s-tooltip content="Light Theme" effect="light" style="width: 5em;" />
    <s-tooltip content="Customized Theme" effect="customized" style="width: 8em;" />
  </el-space>
</template>

<script setup lang="ts">
</script>

<style lang="scss">
  .el-popper.is-customized {
    padding: 6px 12px;
    background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
  }

  .el-popper.is-customized .el-popper__arrow::before {
    background: linear-gradient(45deg, #b2e68d, #bce689);
    right: 0;
  }
</style>

原生提示

Tooltip 提示

Tooltip Mode

---

HTML 原生提示( title 属性)

HTML title Mode

点击查看代码

<template>
  <div class="example-sub-title">Tooltip 提示</div>
  <s-tooltip content="Tooltip Mode" style="width: 6em;" />

  <hr />

  <div class="example-sub-title">HTML 原生提示( <code>title</code> 属性)</div>
  <s-tooltip content="HTML title Mode" style="width: 7em;" nativeMode />
</template>

<script setup lang="ts">
</script>

Props