0


element-ui tooltip的使用

在项目的开发中,有好多地方都需要对页面标签添加一些备注信息,方便用户可以更深入的了解内容的含义。

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-ui tooltip vue

本文转载自: https://blog.csdn.net/qq_36509946/article/details/128849397
版权归原作者 笑到世界都狼狈 所有, 如有侵权,请联系我们删除。

“element-ui tooltip的使用”的评论:

还没有评论