1. Tooltip文字提示

1.1. Tooltip文字提示常用于展示鼠標(biāo)hover時(shí)的提示信息。

1.2. Attributes

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
effect	默認(rèn)提供的主題	String	dark/light	dark
content	顯示的內(nèi)容, 也可以通過(guò)slot#content傳入DOM	String	無(wú)	無(wú)
placement	Tooltip的出現(xiàn)位置	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	?狀態(tài)是否可見(jiàn)	Boolean	無(wú)	false
disabled	Tooltip是否可用	Boolean	無(wú)	false
offset	出現(xiàn)位置的偏移量	Number	無(wú)	0
transition	定義漸變動(dòng)畫(huà)	String	無(wú)	el-fade-in-linear
visible-arrow	是否顯示Tooltip箭頭, 更多參數(shù)可見(jiàn)Vue-popper	Boolean	無(wú)	true
popper-options	popper.js的參數(shù)	Object	參考popper.js文檔	{ boundariesElement: 'body', gpuAcceleration: false }
open-delay	延遲出現(xiàn), 單位毫秒	Number	無(wú)	0
manual	手動(dòng)控制模式, 設(shè)置為true后, mouseenter和mouseleave事件將不會(huì)生效	Boolean	無(wú)	false
popper-class	為T(mén)ooltip的popper添加類名	String	無(wú)	無(wú)
enterable	鼠標(biāo)是否可進(jìn)入到tooltip中	Boolean	無(wú)	true
hide-after	Tooltip出現(xiàn)后自動(dòng)隱藏延時(shí), 單位毫秒, 為0則不會(huì)自動(dòng)隱藏	Number	無(wú)	0
tabindex	Tooltip組件的tabindex	Number	無(wú)	0

2. Tooltip文字提示例子

2.1. 使用腳手架新建一個(gè)名為element-ui-tooltip的前端項(xiàng)目, 同時(shí)安裝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下創(chuàng)建Tooltip.vue

<template><div><h1>基礎(chǔ)用法</h1><h4>使用content屬性來(lái)決定hover時(shí)的提示信息。由placement屬性決定展示效果: placement屬性值為: 方向-對(duì)齊位置; 四個(gè)方向: top、left、right、bottom; 三種對(duì)齊位置: start, end, 默認(rèn)為空。如placement="left-end", 則提示信息出現(xiàn)在目標(biāo)元素的左側(cè), 且提示信息的底部與目標(biāo)元素的底部對(duì)齊。</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下創(chuàng)建EffectTooltip.vue

<template><div><h1>主題</h1><h4>通過(guò)設(shè)置effect屬性來(lái)改變主題, 默認(rèn)為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下創(chuàng)建SlotContentTooltip.vue

<template><div><h1>更多Content</h1><h4>用具名slot分發(fā)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. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/Tooltip

2.7. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/EffectTooltip

2.8. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/SlotContentTooltip

總結(jié)

以上是生活随笔為你收集整理的040_Tooltip文字提示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。