element tooltip的使用

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

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

官方地址

实现效果如下图所示：

 简单的主要代码如下：

   上左

使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

如果在平时开发中想要用显示一个图标，鼠标悬停时显示提示信息，效果如下：

代码如下：

// 直接加在某段文字前后

  
注：提示信息
  

// 插在label里面的用法

  
    标签名称
    
      
注：提示信息
      
    
  
  

 总之，tooltip还是蛮好用的，项目中很多地方都有用到，即方便又美观

到此这篇关于element tooltip的使用的文章就介绍到这了,更多相关element tooltip内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！