040_Tooltip文字提示

1. Tooltip文字提示

1.1. Tooltip文字提示常用于展示鼠标hover时的提示信息。

1.2. Attributes

参数	说明	类型	可选值	默认值
effect	默认提供的主题	String	dark/light	dark
content	显示的内容, 也可以通过slot#content传入DOM	String	无	无
placement	Tooltip的出现位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
value / v-model	状态是否可见	Boolean	无	false
disabled	Tooltip是否可用	Boolean	无	false
offset	出现位置的偏移量	Number	无	0
transition	定义渐变动画	String	无	el-fade-in-linear
visible-arrow	是否显示Tooltip箭头, 更多参数可见Vue-popper	Boolean	无	true
popper-options	popper.js的参数	Object	参考popper.js文档	{ boundariesElement: 'body', gpuAcceleration: false }
open-delay	延迟出现, 单位毫秒	Number	无	0
manual	手动控制模式, 设置为true后, mouseenter和mouseleave事件将不会生效	Boolean	无	false
popper-class	为Tooltip的popper添加类名	String	无	无
enterable	鼠标是否可进入到tooltip中	Boolean	无	true
hide-after	Tooltip出现后自动隐藏延时, 单位毫秒, 为0则不会自动隐藏	Number	无	0
tabindex	Tooltip组件的tabindex	Number	无	0

2. Tooltip文字提示例子

2.1. 使用脚手架新建一个名为element-ui-tooltip的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Tooltip from '../components/Tooltip.vue'
import EffectTooltip from '../components/EffectTooltip.vue'
import SlotContentTooltip from '../components/SlotContentTooltip.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Tooltip' },{ path: '/Tooltip', component: Tooltip },{ path: '/EffectTooltip', component: EffectTooltip },{ path: '/SlotContentTooltip', component: SlotContentTooltip }
]const router = new VueRouter({routes
})export default router

2.3. 在components下创建Tooltip.vue

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

2.4. 在components下创建EffectTooltip.vue

<template><div><h1>主题</h1><h4>通过设置effect属性来改变主题, 默认为dark。</h4><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></div>
</template>

2.5. 在components下创建SlotContentTooltip.vue

<template><div><h1>更多Content</h1><h4>用具名slot分发content, 替代tooltip中的content属性。</h4><el-tooltip placement="right-start"><div slot="content">多行信息<br/>第二行信息</div><el-button>right start</el-button></el-tooltip></div>
</template>

2.6. 运行项目, 访问http://localhost:8080/#/Tooltip

2.7. 运行项目, 访问http://localhost:8080/#/EffectTooltip

2.8. 运行项目, 访问http://localhost:8080/#/SlotContentTooltip

040_Tooltip文字提示相关推荐

html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果
本文作者html5tricks,转载请注明出处这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但in ...
jQuery图片提示和文字提示
图片提示: 效果如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
通达信版弘历软件指标_中线公式指标（副图通达信贴图）明确文字提示，辅助判断中线走势下载_通达信公式...
中线公式指标(副图通达信贴图)明确文字提示,辅助判断中线走势下载详细说明第一股票公式网()告诉您:当前正要下载:中线公式指标(副图通达信贴图)明确文字提示,辅助判断中线走势下载中线公式指标 ...
计算机应用基础操作题提示,计算机应用基础_操作题文字提示(已经放大了请不要打印).doc...
计算机应用基础_操作题文字提示(已经放大了请不要打印),苹果忘记安全提示问题,app忘记安全提示问题,app提示问题忘记,苹果提示问题忘记,安全提示问题,提示安全证书有问题,ipad忘记安全提示问题, ...
javaScript实现选中文字提示新浪微博分享的效果
<!DOCTYPE html> <html xmlns:wb="http://open.weibo.com/wb"> <head><met ...
jQuery实现的简单文字提示效果模拟title
模拟title实现效果,可以修改文字的样式,换行等. 文件下载: 先看下效果截图: 代码分析: <script src="jquery.j ...
便签纸文字提示ui布局css3
下载地址 CSS3别针纸网页便签纸特效,css3绘制别针纸网页提示,便签纸文字提示ui布局. dd:
#今日论文推荐# 文字秒变3D？苹果发布最新AI生成模型GAUDI，根据文字提示创建3D场景
#今日论文推荐# 文字秒变3D?苹果发布最新AI生成模型GAUDI,根据文字提示创建3D场景继 AI 将文字变成图片后,又有 AI 可以将文字变成 3D 场景了. 苹果发布新 AI 系统 GAUDI ...

040_Tooltip文字提示

040_Tooltip文字提示相关推荐

最新文章

热门文章