vue3.0 组件篇 Tooltip

已于 2023-10-26 16:18:47 修改
阅读量7.2k 收藏 7
点赞数 4
分类专栏： vue3-dxui 文章标签： javascript tooltip vue3 Tooltip
于 2022-06-20 11:33:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/glorydx/article/details/125357642
版权
本文详细介绍了Vue3 dxUI库中的Tooltip组件，它用于提供简短的提示信息，增强用户体验。组件支持多种触发方式、定位选项、自定义内容和宽度，并考虑了可访问性。文章还分享了开发思路、组件安装使用方法、参数说明及事件监听。同时，提供了完整的组件代码示例，帮助开发者理解和应用Tooltip组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

组件介绍

“Tooltip” 组件是一种用户界面元素，通常用于提供简短的信息、描述、提示或帮助文本，以解释某个元素的功能或提供额外的上下文信息。通常， “Tooltip” 以弹出框或气泡的形式出现，用户可以将鼠标悬停在目标元素上以触发显示。以下是关于 “Tooltip” 组件的介绍和特点：

  1. 简短文本:

    • “Tooltip” 组件通常包含简短的文本消息，用于解释或提供有关目标元素的信息。

  2. 鼠标悬停触发:

    • “Tooltip” 通常在用户将鼠标悬停在目标元素上时触发显示，以提供额外的上下文信息。

  3. 定位和位置:

    • “Tooltip” 组件通常可以根据目标元素的位置自动定位，以确保它不会超出屏幕边界或遮挡目标元素。

  4. 自动关闭:

    • 通常， “Tooltip” 会自动关闭，当用户将鼠标移出目标元素或等待一段时间后。

  5. 手动关闭:

    • 一些 “Tooltip” 组件支持用户手动关闭，通常通过点击关闭按钮或其他指示方式。

  6. 可访问性:

    • 良好的 “Tooltip” 组件应该考虑到可访问性，以确保它对于使用辅助技术的用户也是可访问的。

  7. 自定义内容:

    • 开发人员通常可以自定义 “Tooltip” 组件的内容、样式和触发方式，以满足特定需求。

  8. 响应式设计:

    • “Tooltip” 组件通常支持响应式设计，以适应不同屏幕尺寸和设备类型。

  9. 多用途:

    • “Tooltip” 可以用于不同类型的元素，包括按钮、链接、图标、表单字段等，以提供帮助和上下文信息。

“Tooltip” 组件对于增强用户体验、提供额外的上下文信息或解释界面元素非常有用。它通常用于网页应用程序、移动应用程序、桌面应用程序等，以提供用户友好的界面。前端框架和库通常提供了 “Tooltip” 组件的实现，或者你可以自行编写代码来创建适合你应用程序需求的提示功能。

开发思路

Tooltip是一种小型弹出框，它显示有关特定页面元素的信息，例如按钮、链接或图标。Tooltip通常以半透明的气泡形式呈现，并出现在页面元素的旁边或下方。

它可以改善用户体验，使用户更容易理解页面元素的功能和意图。用户可以通过将鼠标悬停在页面元素上来快速了解有关该元素的信息，而无需离开当前页面或浏览其他页面。

  1. 定位问题，很重要，top topLeft topRight bottom bottomLeft bottomRight left right，tooltip可以出现在不同的位置
  2. 采用默认插槽的方式，将需要tooltip的内容放置
  3. 通过父组件传入的visible进行手动控制tooltip的显现和隐藏
  4. 可以自定义tooltip背景色，如果自定义了，文字为白色
  5. 监听状态的变化，通过$emit 实现@change的调用
  6. 自定义tooltip的宽度，这个很重要
  7. 默认触发tooltip的方式为hover ，触发的方式还有click，如果从父组件传入了visible，hover和click将会失效

组件安装与使用

需要先安装vue3-dxui

yarn add vue3-dxui

或者

npm install vue3-dxui

全局main.ts中引入css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vue3-dxui/dxui/dxui.css'

createApp(App).use(store).use(router).mount('#app')

按需引入

<script>
import { Tooltip } from 'vue3-dxui'

export default {
  components: {
  	Tooltip
  }
}
</script>

组件代码

<template>
  <div
    @mouseenter="handleHoverTooltipShow"
    @mouseleave="handleHoverTooltipHide"
    @click="handleClickTooltipChange"
    class="dx-tooltip-warpper"
    :class="`trigger-${trigger} position-${position}`"
  >
    <!-- 在顶层通过传入的visible进行控制 -->
    <div v-show="visible !== undefined ? visible : true" class="dx-tooltip-max-width">
      <!-- 在内层通过组件自身的tooltipvisible进行控制 -->
      <div
        v-show="tooltipVisible"
        class="dx-tooltip-content-warpper"
        :style="
          background ? { background, color: '#fff', borderColor: background, width } : { width }
        "
      >
        <div class="tooltip-title">
          {{ title }}
        </div>
        <div
          class="tooltip-icon"
          :style="background ? { background, color: '#fff', borderColor: background } : {}"
        />
      </div>
    </div>
    <slot />
  </div>
</template>

<script lang="ts">
import { ComponentInternalInstance, getCurrentInstance, ref, PropType, watch } from 'vue'

import { Data } from './types'

export default {
  props: {
    // tooltip的内容
    title: {
      required: false,
      default: '',
      type: String
    },
    // tooltip的触发方式 hover click
    trigger: {
      required: false,
      default: 'hover',
      type: String
    },
    // 可以用来手动控制tooltip的出现或者消失
    visible: {
      required: false,
      default: undefined,
      type: Boolean as PropType<boolean | undefined>
    },
    // tooltip出现的位置
    position: {
      required: false,
      default: 'topLeft',
      type: String
    },
    // 可以设置tooltip的背景颜色
    background: {
      required: false,
      default: '',
      type: String
    },
    // 自定义tooltip的宽度,tooltip的宽度受被包裹元素的影响，这里提供自定义
    width: {
      required: false,
      default: '',
      type: String
    }
  },
  watch: {
    // 对外界传入的visible进行监听，选用了vue2的写法，因为外界传入的visible可能不是一个ref只是一个简单的boolean值
    visible(newval: boolean) {
      // this.$emit 会报错 说$emit在类型里面不存在，所以用这样的方式，但实际上是存在的，将来可能需要改进下，知道的朋友说一下
      const that: any = this
      that?.$emit('change', newval)
    }
  },
  setup(propsData: Data) {
    let tooltipVisible = ref(false)
    if (propsData.visible !== undefined) {
      tooltipVisible = ref(true)
    }

    const currentInstance: ComponentInternalInstance | null = getCurrentInstance()

    const handleHoverTooltipShow = () => {
      if (propsData.trigger === 'hover' && propsData.visible === undefined) {
        tooltipVisible.value = true
      }
    }

    const handleHoverTooltipHide = () => {
      if (propsData.trigger === 'hover' && propsData.visible === undefined) {
        tooltipVisible.value = false
      }
    }

    const handleClickTooltipChange = () => {
      if (propsData.trigger === 'click' && propsData.visible === undefined) {
        tooltipVisible.value = !tooltipVisible.value
      }
    }

    // 如果是组件内部自己维护的tooltipVisible,就用vue3的watch触发监听，实现change的回调
    watch(tooltipVisible, (newval) => {
      currentInstance?.emit('change', newval)
    })

    return {
      tooltipVisible,
      handleHoverTooltipShow,
      handleHoverTooltipHide,
      handleClickTooltipChange
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/scss/layout.scss';

.dx-tooltip-warpper {
  display: inline-block;
  position: relative;
  cursor: pointer;

  .dx-tooltip-max-width {
    text-align: initial;
    position: absolute;
    z-index: 1000;
    width: 100%;
  }

  .dx-tooltip-content-warpper {
    display: inline-block;
    text-align: initial;
    padding: 6px 10px;
    background: $background-color;
    border: $border;
    border-radius: 4px;
    min-width: 80px;
  }

  .tooltip-title {
    font-size: 14px;
    z-index: 1000;
  }

  .tooltip-icon {
    width: 12px;
    height: 12px;
    position: absolute;
    z-index: 999;
    transform: rotate(45deg);
    background: $background-color;
    border-bottom: $border;
    border-right: $border;
  }
}

.dx-tooltip-warpper.position-topLeft {
  .dx-tooltip-content-warpper {
    position: absolute;
    bottom: calc(100% + 10px);
  }
}

.dx-tooltip-warpper.position-top {
  .dx-tooltip-max-width {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .dx-tooltip-content-warpper {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
  }

  .tooltip-icon {
    position: absolute;
    left: 50%;
    margin-left: -4px;
  }
}

.dx-tooltip-warpper.position-topRight {
  .dx-tooltip-max-width {
    position: absolute;
    right: 0;
  }

  .dx-tooltip-content-warpper {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
  }

  .tooltip-icon {
    position: absolute;
    right: 12px;
  }
}

.dx-tooltip-warpper.position-bottomLeft {
  .dx-tooltip-max-width {
    position: absolute;
    bottom: -10px;
  }

  .dx-tooltip-content-warpper {
    position: absolute;
  }

  .tooltip-icon {
    position: absolute;
    top: -6px;
    transform: rotate(-135deg);
  }
}

.dx-tooltip-warpper.position-bottom {
  .dx-tooltip-max-width {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .dx-tooltip-content-warpper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .tooltip-icon {
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -4px;
    transform: rotate(-135deg);
  }
}

.dx-tooltip-warpper.position-bottomRight {
  .dx-tooltip-max-width {
    position: absolute;
    bottom: -10px;
    right: 0;
  }

  .dx-tooltip-content-warpper {
    position: absolute;
    right: 0;
  }

  .tooltip-icon {
    position: absolute;
    top: -6px;
    right: 12px;
    transform: rotate(-135deg);
  }
}

.dx-tooltip-warpper.position-left {
  .dx-tooltip-max-width {
    position: absolute;
    top: 50%;
  }

  .dx-tooltip-content-warpper {
    position: absolute;
    transform: translateX(-100%) translateY(-50%);
    left: -10px;
  }

  .tooltip-icon {
    position: absolute;
    right: -6px;
    top: calc(50% - 6px);
    transform: rotate(-45deg);
  }
}

.dx-tooltip-warpper.position-right {
  .dx-tooltip-max-width {
    position: absolute;
    top: 50%;
    margin-left: calc(100% + 10px);
  }

  .dx-tooltip-content-warpper {
    position: absolute;
    transform: translateY(-50%);
  }

  .tooltip-icon {
    position: absolute;
    left: -6px;
    top: calc(50% - 6px);
    transform: rotate(135deg);
  }
}
</style>

参数说明

名称说明
titlestring类型，tooltip的内容
triggerhover 或者 click ， tooltip的触发方式，默认值是hover
visibleboolean类型，可以通过父组件来自定义控制trigger的消失或隐藏
positiontooltip出现的位置，默认值是 topLeft
background背景色，如果有背景色设置，字体默认是白色
widthtooltip的宽度

事件

事件名称说明
@change当tooltip显示或者隐藏状态发生改变时触发，返回值是当前tooltip的visible的值

关于dxui组件库

dxui组件库是我个人搭建的vue3 前端交互组件库，倾向于pc网站的交互模式。

  1. 如果你有任何问题，请在博客下方评论留言，我尽可能24小时内回复。
  2. dxui新上线的官网域名变更 http://dxui.cn
  3. npm 官方链接 https://www.npmjs.com/package/vue3-dxui
  4. 如果你想看完整源码 https://github.com/757363985/dxui

在这里插入图片描述

Vue3.0与Echarts5
娜的博客
08-08 902
有句话说的好“一图胜千言”，在我们开发的领域就是说，在对于复杂难懂且体量庞大的数据展示上面而言，图表的信息量要大得多，这也是我们为什么要谈数据可视化。study-notes/echarts/echarts.md · James/技术笔记 - Gitee.com。
Echarts+Vue3.0 大数据可视化项目构建
corn6的博客
03-07 2960
项目结构 myapp文件夹：前端 项目初始化 进入app.vue，清空所有外在样式 <style lang="less"> * { margin: 0; padding: 0; // 解析的时候，边框、内边距等是包含在width中的 box-sizing: border-box; } </style> 项目分辨率响应——lib-flexible 项目页面布局随窗口大小改变而改变 使用第三方库lib-flexible，rem屏幕适配 myapp> npm
Vue tooltip 组件封装(动态地控制tooltip的显示，如果内容能够完全显示在父元素中，则不需要使用tooltip)
weixin_46328739的博客
06-08 2445
1.tooltip 组件封装(动态地控制tooltip的显示，如果内容能够完全显示在父元素中，则不需要使用tooltip) 2.Vue文本内容单行或多行超出显示省略号判断，超出显示tooltip提示
v-tooltip:Vue 3的工具提示
03-20
v工具提示 Vue 3工具提示自定义指令 目录 安装 将tooltip.js粘贴到您的src文件夹中，为了清楚起见，我亲自在其中创建了文件夹directives 。下一步是将tooltip.css粘贴到assets文件夹中。 拥有所有文件后，打开main.js文件（或任何挂载应用程序的文件），然后导入这些文件。然后使用app.directive全局添加v-tooltip自定义指令。它看起来应该类似于： import { createApp } from "vue" ; import App from "./App.vue" ; import tooltip from "./directives/tooltip.js" ; import "@/assets/tooltip.css" ; const app = createApp ( App ) ; // app.directive&#39;s
QML 弹窗控件： ToolTip的基本用法与样式定制
最新发布
u011186532的专栏
04-11 1225
本文通过三个不同复杂度的示例，展示了Qt QML ToolTip控件的基本用法和自定义方法： 基础ToolTip：展示了ToolTip最简单的使用方式，包含基本属性的设置。自定义样式ToolTip：通过contentItem和background属性，对ToolTip的文本样式和背景进行了自定义，展示了如何创建具有个性化外观的提示框。富文本ToolTip：演示了如何创建包含多种元素（文本、图像）的复杂提示，并添加了阴影等高级视觉效果。
Vue3文字提示（Tooltip）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
03-13 3823
文字提示气泡框，支持：自定义弹出提示最大宽度；自定义样式；自定义弹出提示位置；自动调整位置；自定义触发方式；按键控制；自定义过渡动画时间；延迟显示隐藏；使用 Methods；隐藏箭头；总之，功能丰富，简单易用😁😁
vue3通过ElementPlus的tooltip组件实现自定义指令文字提示
TravelAlone的博客
05-20 1943
之前的项目中，有些文字比较长，不可能全部展示出来，就自己手写了个指令版本的tooltip,开始使用的显示方式，是自己在body中单独创建了个元素，然后监听鼠标事件，然后采用position:fixed的方式展示。后来，想了下，打算借助ElementPlus的tooltip组件进行实现，只需要自己去判断内容是否超出展示的边界即可，于是便有了这篇文章。
vue3 封装一个Tooltip 文字提示组件
ZMJ_QQ的博客
01-09 1507
默认展示icon图标，悬浮展示文字如果slot有内容则展示对应内容。
Vue3+Ts封装ToolTip组件
qq_59625204的博客
08-14 1342
本组件支持hover和click两种触发方式，需要更多的触发方式，可自行去扩展！！！本初提供css和sass两种定义css的方式，自行选择！！！
Element Plus 教程(beta版，适配 Vue 3.0 的 Element).pdf
02-28
Element Plus 是一个基于 Vue 3.0 的 UI 组件库，它是著名的 Element UI 框架针对 Vue 3.0 进行的升级版。Element Plus 保持与 Element UI 的设计理念一致，同时适配 Vue 的新特性，为开发者提供了一套现代化的UI...
vue中echarts3.0自适应的方法
01-19
前端时间做一个vue的项目，echart是按需引入的如下： // 引入 ECharts 主模块 import echarts from &#39;echarts/lib/echarts&#39; // 引入折线图 import &#39;echarts/lib/chart/line&#39; // 引入提示框和图例组件 import &#39;...
基于Vue的简单tooltip工具
08-09
基于 Vue 的简单 tooltip 工具
一个Vue2x的tooltip提示信息组件
08-08
这是一个vue的tooltip提示信息组件。它使用非常简便，同时它支持自定义样式，提示信息的位置，触发提示信息弹出的事件。提示出现隐藏的延迟时间等。
一个vuetooltip组件
08-12
一个vue tooltip组件
vue 3.0知识 / ES6 /组件作用
Crowd_chips的博客
12-18 429
vue3.0 创建脚手架 vue -v npm i -g @vue/cli (安装) npm run dev
vue3 tooltip
fhrlhh的博客
01-09 263
【代码】vue3 tooltip。
vue3 tooltip 指令
weixin_49477258的博客
07-13 533
【代码】vue3 tooltip 指令。
使用vue3自定义指令实现Tooltip
不怕麻烦的鹿丸的博客
01-31 1154
【代码】使用vue3自定义指令实现Tooltip。
vue tooltip动态绑定提示信息_基于 HTML5 Canvas 的拓扑组件 ToolTip 应用
weixin_39688687的博客
12-10 853
前言ToolTip 效果是网页制作中常见的使用特效。当用户将鼠标悬浮在某个控件上时，ToolTip 显示并向用户展示相应的提示信息；当鼠标离开时，ToolTip 隐藏。一般情况下，我们使用 ToolTip 只是显示一句话或几个字，其实我们还可以展示很多信息。而今天的重点则是通过 Hightopo 的 HT for Web 产品来制作多种样式的 ToolTip。首页地址：https://www.hi...
Vue3.0结合Echarts构建立体柱状图
"这篇文档是关于在Vue 3.0项目中使用ECharts库来创建立体柱状图的教程。主要介绍了三个关键步骤：安装ECharts、定义图表容器以及在JavaScript中设置ECharts实例和配置项。" 在现代前端开发中，数据可视化是不可或缺...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可缺不可滥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值