element 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 tooltip的使用的文章就介绍到这了,更多相关element tooltip内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • ElementUI中利用table表格自定义表头Tooltip文字提示

    ElementUI中利用table表格自定义表头Tooltip文字提示

    目录 实现效果 ElementUI文档 el-table组件 tooltip组件 render-header绑定的方法 实现效果 ElementUI文档 el-table组件 <el-table-column label="水位高程(m)" header-align="center" align="center"> <el-table-column prop="swlel" label="传感器监测

  • Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

    render-header render-header在官方文档中的介绍是这样的: 参数 说明 类型 可选值 默认值 render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) - - 修改列标题样式 1.在列标题后面加一个图标. 以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下: <template> <el-table :data="ta

  • Element Tooltip 文字提示的使用示例

    组件- 文字提示 基础用法 <div class="box"> <div class="top"> <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button> <

  • VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

    ElementUI2.0的表格的扩展: elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢? <el-table empty-text="正在加载中..." :data="contentList" style="width: 100%" @sort-change="sort" class="pro-table-item" too

  • element-ui tooltip修改背景颜色和箭头颜色的实现

    本文介绍了element-ui tooltip修改背景颜色和箭头颜色的实现,分享给大家,具体如下: <el-tooltip class="item" effect="dark" content="分享" placement="left" popper-class="draw_share_atooltip"> <el-button> <div class="iconfo

  • vue Element UI扩展内容过长使用tooltip显示示

    vue Element UI扩展内容过长使用tooltip显示示

    目录 1. 介绍 2. element-ui(vue2版本) 2.1 注册指令 1) akTooltipAutoShow.js 2.2 使用 3. element-plus(vue3版本) 3.1 注册指令 1) akTooltipAutoShow.js 2) 进行局部或全局注册 3.2 使用 1. 介绍 Tooltip常用于展示鼠标 hover 时的提示信息. 而在实际过程中,有这么一个需求:只有文字内容排不下,出现省略号,才需要显示tooltip的提示内容. 本文章的思路是通过一个自定义指令

  • element tooltip的使用

    在项目的开发中,有好多地方都需要对页面标签添加一些备注信息,方便用户可以更深入的了解内容的含义. element-ui中就用tooltip的使用,用起来很方便,且可以调整提示文字出现的文字,官方地址如下: 官方地址 实现效果如下图所示: 简单的主要代码如下: <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start&quo

  • BootStrap tooltip提示框使用小结

    提示框 提示框的基本使用方式为: 复制代码 代码如下: <span data-toggle="tooltip" data-original-title="this is alert content">test message</span> data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供HTML触发方式只能通过JS来进行触发: $("[dat

  • Bootstrap提示框效果的实例代码

    Bootstrap提示框效果的实例代码

    本文介绍了Bootstrap提示框,分享给大家,顺便也给自己留个笔记 前面的话 提示框是一个比较常见的功能,一般来说是鼠标移动到特定元素上时,显示相关的提示语.本文将详细介绍Bootstrap提示框 基本用法 Bootstrap框架中的提示框,结构非常简单,常常使用的是按钮<button>标签或者链接<a>标签来制作.不管是使用按钮还是链接来制作提示框,他们都需要满足下列条件: 1.通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-titl

  • ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了---- Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp

  • Vue组件之Tooltip的示例代码

    前言 本文主要Alert 组件的大致框架, 提供少量可配置选项. 旨在大致提供思路 tooltip 常用于展示鼠标 hover 时的提示信息. 模板结构 <template> <div style="position:relative;"> <span ref="trigger"> <slot> </slot> </span> <div class="tooltip"

  • 基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个性化的需求,使得我们用这些插件的默认机制并不能完成这些功能,所以要根据自己的需要去改造它们(毕竟自己还不到那个写一个完美的校验框架的层次).我用过formValidation这个校验框架,虽然它跟bootstrap配合地很好,但是校验风格太死板,不太满足个性化的场景:后来我找到了jquery.val

  • 使用JS组件实现带ToolTip验证框的实例代码

    使用JS组件实现带ToolTip验证框的实例代码

    本组件依赖JQuery 本人测试的JQuery 是1.8, 兼容IE8,IE9,谷歌,火狐等. //验证输入框 function ValidateCompent(input){ var _input = $(input).clone(true); _input.css("height",$(input).css("height")); _input.css("width", $(input).css("width")); va

  • jQuery Tools tooltip使用说明

    HTML 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

随机推荐