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