element tooltip的使用
笑到世界都狼狈 人气:0在项目的开发中,有好多地方都需要对页面标签添加一些备注信息,方便用户可以更深入的了解内容的含义。
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还是蛮好用的,项目中很多地方都有用到,即方便又美观
加载全部内容