element tooltip的使用

Posted on by

在項目的開發中，有好多地方都需要對頁面標簽添加一些備註信息，方便用戶可以更深入的瞭解內容的含義。

element-ui中就用tooltip的使用，用起來很方便，且可以調整提示文字出現的文字，官方地址如下：

官方地址

實現效果如下圖所示：

 簡單的主要代碼如下：

<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"，則提示信息出現在目標元素的左側，且提示信息的底部與目標元素的底部對齊。

如果在平時開發中想要用顯示一個圖標，鼠標懸停時顯示提示信息，效果如下：

代碼如下：

// 直接加在某段文字前後
<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還是蠻好用的，項目中很多地方都有用到，即方便又美觀

到此這篇關於element tooltip的使用的文章就介紹到這瞭,更多相關element tooltip內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：