element?tooltip的使用
在項(xiàng)目的開發(fā)中，有好多地方都需要對(duì)頁面標(biāo)簽添加一些備注信息，方便用戶可以更深入的了解內(nèi)容的含義。
element-ui中就用tooltip的使用，用起來很方便，且可以調(diào)整提示文字出現(xiàn)的文字，官方地址如下：
實(shí)現(xiàn)效果如下圖所示：
簡(jiǎn)單的主要代碼如下：
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button> </el-tooltip>
使用content屬性來決定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ì)齊。
如果在平時(shí)開發(fā)中想要用顯示一個(gè)圖標(biāo)，鼠標(biāo)懸停時(shí)顯示提示信息，效果如下：
代碼如下：
// 直接加在某段文字前后 <el-tooltip effect="dark" placement="bottom-start"> <div slot="content">注：提示信息</div> <i class="el-icon-info" /> </el-tooltip>
// 插在label里面的用法
<el-form-item label="" prop="nameAccessControl" label-width="135px">
<span slot="label">
標(biāo)簽名稱
<el-tooltip effect="dark" placement="bottom-start">
<div slot="content">注：提示信息</div>
<i class="el-icon-info" />
</el-tooltip>
</span>
<el-input v-model="temp.nameAccessControl" maxlength="100"></el-input>
</el-form-item>總之，tooltip還是蠻好用的，項(xiàng)目中很多地方都有用到，即方便又美觀
到此這篇關(guān)于element tooltip的使用的文章就介紹到這了,更多相關(guān)element tooltip內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VUE表達(dá)式{{}}中如何拼接字符問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vuex的使用及持久化state的方式詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問題及解決
這篇文章主要介紹了vue項(xiàng)目element-ui級(jí)聯(lián)選擇器el-cascader回顯的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue實(shí)現(xiàn)用戶長(zhǎng)時(shí)間不操作自動(dòng)退出登錄功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue實(shí)現(xiàn)用戶長(zhǎng)時(shí)間不操作自動(dòng)退出登錄功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼
這篇文章主要介紹了vue集成kindeditor富文本的實(shí)現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決
這篇文章主要介紹了vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
解決vue?eslint開發(fā)嚴(yán)格模式警告錯(cuò)誤的問題
這篇文章主要介紹了解決vue?eslint開發(fā)嚴(yán)格模式警告錯(cuò)誤的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解Vue.js自定義tipOnce指令用法實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue3報(bào)錯(cuò)提示找不到模塊“./XXX.vue”或其相應(yīng)的類型聲明問題
這篇文章主要介紹了vue3報(bào)錯(cuò)提示找不到模塊“./XXX.vue”或其相應(yīng)的類型聲明問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
最近在開發(fā)時(shí)遇到一個(gè)問題,是在輸入框里面放一個(gè)樹形組件,這篇文章主要給大家介紹了關(guān)于前端vue3樹形組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07