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文字提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。