Element浅尝辄止8:Tooltip 文字提示组件

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

1.如何使用?

//使用content属性来决定hover时的提示信息。
//由placement属性决定展示效果:placement属性值为:方向-对齐位置;
//四个方向:top、left、right、bottom;三种对齐位置:start, end,默认为空。
//如placement="left-end",则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。<div class="box"><div class="top"><el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"><el-button>上左</el-button></el-tooltip><el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top"><el-button>上边</el-button></el-tooltip><el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end"><el-button>上右</el-button></el-tooltip></div></div><style>.box {width: 400px;.top {text-align: center;}.item {margin: 4px;}}
</style>

2.主题

Tooltip 组件提供了两个不同的主题:darklight。 

通过设置effect属性来改变主题,默认为dark。<el-tooltip content="Top center" placement="top"><el-button>Dark</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" placement="bottom" effect="light"><el-button>Light</el-button>
</el-tooltip>

3.更多 Content 

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

<el-tooltip placement="top"><div slot="content">多行信息<br/>第二行信息</div><el-button>Top center</el-button>
</el-tooltip>

4.高级扩展

除了这些基本设置外,还有一些属性可以让使用者更好的定制自己的效果:

transition 属性可以定制显隐的动画效果,默认为fade-in-linear。 如果需要关闭 tooltip 功能,disabled 属性可以满足这个需求,它接受一个Boolean,设置为true即可。

<template><el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light"><el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button></el-tooltip>
</template>
<script>export default {data() {return {disabled: false};}};
</script>

 关于tooltip组件的大体内容介绍完了,想要深入浅出请前往文字提示

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/58562.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 强制转换运算符

强制转换运算符是一种特殊的运算符&#xff0c;它把一种数据类型转换为另一种数据类型。强制转换运算符是一元运算符&#xff0c;它的优先级与其他一元运算符相同。 大多数的 C 编译器都支持大部分通用的强制转换运算符&#xff1a; (type) expression 其中&#xff0c;type …

Java项目-苍穹外卖-Day05-Redis技术应用

1.店铺营业状态设置 需求分析和设计 左上角要求是有回显的 所以至少两个接口 1.查询营业状态接口&#xff08;分为了管理端和用户端&#xff09; 2.修改营业状态接口 因为管理端和用户端路径不同&#xff0c;所以现在是至少三个接口的 可以发现如果存到表里除了id只有一个…

C# List与HashSet的contains()方法查询速度比较

List 和HashSet同时查询40万条数据&#xff0c;谁的效率更高&#xff1f; //**1.下面是List底层源码**public boolean contains(Object o) {//如果查到我们想要查询的值则返回一个true&#xff0c;否则返回false&#xff0c;return indexOf(o) > 0;//这里是调用了indexOf方…

Kafka3.0.0版本——Leader故障处理细节原理

目录 一、服务器信息二、服务器基本信息及相关概念2.1、服务器基本信息2.2、LEO的概念2.3、HW的概念 三、Leader故障处理细节 一、服务器信息 三台服务器 原始服务器名称原始服务器ip节点centos7虚拟机1192.168.136.27broker0centos7虚拟机2192.168.136.28broker1centos7虚拟机…

智慧矿山2.0:煤矿智能化综合管理AI大数据监管平台建设方案设计

一、行业背景 能源与煤矿是我国国民经济的重要物质生产部门和支柱产业之一&#xff0c;同时也是一个安全事故多发的高危行业&#xff0c;施工阶段的现场管理对工程成本、进度、质量及安全等至关重要。煤矿智能化既是未来趋势&#xff0c;更是产业发展需求&#xff0c;建设智慧…

列表类控件虚拟化

WPF列表控件提供的最重要的功能是UI虚拟化&#xff08;WPF编程宝典说的&#xff09;。所有的WPF列表控件&#xff08;所有继承自ItemsControl的控件&#xff0c;包括ListBox、CombBox、ListView、TreeView、DataGrid&#xff09;都支持UI虚拟化。 UI虚拟化的支持实际上没有被构…

vue2.6及以下版本导入 TDesign UI组件库

TDesign 官方文档:https://tdesign.tencent.com/vue/components/button 我们先打开一个普通的vue项目 然后 如果你是 vue 2.6 或者 低于 2.6 在终端执行 npm i tdesign-vue如果你是 2.7 或者更高 执行 npm i tdesign-vuenaruto这里 我们 以 2.6为例 因为大部分人 用vue2 都是…

零知识证明的应用场景-1用户登录

零知识证明&#xff08;Zero-Knowledge Proof, ZKP&#xff09;是一种密码学方法&#xff0c;它允许一方向另一方证明某个陈述的真实性&#xff0c;而不会泄露任何有关该陈述的其他信息。这种技术在许多场景中都非常有用&#xff0c;尤其是在需要保护隐私的场合。 在身份验证的…

sea.js

这里写自定义目录标题 1. 什么是sea.js2. 如何使用 1. 什么是sea.js Seajs是一个模块加载器遵循 CMD 规范模块化开发&#xff0c;依赖的自动加载、配置的简洁清晰。兼容性 Chrome 3Firefox 2Safari 3.2Opera 10IE 5.5 2. 如何使用 去官网下载最新的seajs文件http://seajs.o…

神经网络的工作原理

目录 神经网络的介绍 神经网络的组成 神经网络的工作原理 Numpy 实现神经元 Numpy 实现前向传播 Numpy 实现一个可学习的神经网络 神经网络的介绍 神经网络受人类大脑启发的算法。简单来说&#xff0c;当你睁开眼睛时&#xff0c;你看到的物体叫做数据&#xff0c;再由你…

微服务时代java异常捕捉

一、尽量不要使用e.printStackTrace(),而是使用log打印。 ​反例:​ try{ // do what you want }catch(Exception e){ e.printStackTrace(); } ​ 正例&#xff1a;​ try{ // do what you want }catch(Exception e){ log.info("你的程序有异常啦,{}",e)…

L1-042 日期格式化(Python实现) 测试点全过

题目 世界上不同国家有不同的写日期的习惯。比如美国人习惯写成“月-日-年”&#xff0c;而中国人习惯写成“年-月-日”。下面请你写个程序&#xff0c;自动把读入的美国格式的日期改写成中国习惯的日期。 输入格式 输入在一行中按照“mm-dd-yyyy”的格式给出月、日、年。题目…

2023常见前端面试题

以下是一些2023年秋招常见的前端面试题及其答案&#xff1a; 1. 请解释一下什么是前端开发&#xff1f; 前端开发是指使用HTML、CSS和JavaScript等技术来构建网页和用户界面的过程。前端开发人员负责将设计师提供的视觉设计转化为可交互的网页&#xff0c;并确保网页在不同设备…

LNMT与动静分离 (四十八)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、LNMT 二、Nginx高级配置 2.1 location 2.2 rewirte 2.2.1 应用场景 2.2.2 书写位置 三、动静分离 总结 前言 LNMT是一个高级神经机器翻译系统&#xff0c;它使…

【Python进阶学习】【Excel读写】使用openpyxl写入xlsx文件

1、当前文件不存在指定的子文件夹则创建 2、文件存在追加写入 3、文件不存在创建文件并写入表头 # -*- coding: utf-8 -*- import openpyxl as xl import osdef write_excel_file(folder_path):if not os.path.exists(folder_path):os.makedirs(folder_path)result_path os.p…

Mac操作系统Safari 17全新升级:秋季推出全部特性

苹果的内置浏览器可能是Mac上最常用的应用程序&#xff08;是的&#xff0c;甚至比Finder、超级Mac Geeks还要多&#xff09;。因此&#xff0c;苹果总是为其浏览器Safari添加有用的新功能。在今年秋天与macOS Sonoma一起推出的第17版中&#xff0c;Safari可以帮助你提高工作效…

驱动day10

练习 基于platform实现 设备树 myplatform_homework{compatible "hqyj,myplatform_homework"; //用于获取节点reg <0x12345678 14>;interrupt-parent <&gpiof>; //引用父节点interrupts <9 0>; //这个节点引入的中断管脚led1-gpi…

搜索与图论-拓扑序列

为什么记录呢 因为不记录全忘了 虽然记了也不一定会看 有向无环图一定有拓扑序列邮箱无环图 - 拓扑图 入度为0的点作为起点入度为0的点入队列枚举出边 t->j删掉当前边&#xff0c;t->j . j的入度减1判断j的入度是否为0&#xff0c;来判断是否加入队列 有环&#xff1a; …

【JavaScript】数组的方法

当谈到 JavaScript 中的数组方法时&#xff0c;有很多内置的方法可用于操作和处理数组中的元素。下面是一些常用的数组方法&#xff0c;以及它们的详细解释&#xff1a; push(item1, item2, …): 将一个或多个元素添加到数组的末尾。 const array [1, 2, 3]; array.push(4, 5)…

.NET Core 开发文档资源

.NET Core 是一个开源的、跨平台的开发框架&#xff0c;用于构建各种类型的应用程序&#xff0c;包括 Web 应用、移动应用、桌面应用等。它提供了许多工具、库和运行时环境&#xff0c;以帮助开发人员构建高性能、可扩展的应用程序。从 .NET 5 开始&#xff0c;.NET Core 已经正…