在項目的開發(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ā)中想要用顯示一個圖標，鼠標懸停時顯示提示信息，效果如下：
代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-506930.html
// 直接加在某段文字前后
<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還是蠻好用的，項目中很多地方都有用到，即方便又美觀文章來源地址http://www.zghlxwxcb.cn/news/detail-506930.html
到了這里，關(guān)于element-ui tooltip的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[element-ui] el-table表格頭添加圖標-鼠標移入顯示el-tooltip提示信息](https://imgs.yssmx.com/Uploads/2024/02/512233-1.png)
