Element Tooltip 文字提示的使用示例


Posted in Javascript onJuly 26, 2020

组件— 文字提示

基础用法

Element Tooltip 文字提示的使用示例

<div class="box">
 <div class="top">
  <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
   <el-button>上左</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
   <el-button>上边</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
   <el-button>上右</el-button>
  </el-tooltip>
 </div>
 <div class="left">
  <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
   <el-button>左上</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
   <el-button>左边</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
   <el-button>左下</el-button>
  </el-tooltip>
 </div>

 <div class="right">
  <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
   <el-button>右上</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
   <el-button>右边</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
   <el-button>右下</el-button>
  </el-tooltip>
 </div>
 <div class="bottom">
  <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
   <el-button>下左</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
   <el-button>下边</el-button>
  </el-tooltip>
  <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
   <el-button>下右</el-button>
  </el-tooltip>
 </div>
</div>

<style>
 .box {
  width: 400px;

  .top {
   text-align: center;
  }

  .left {
   float: left;
   width: 60px;
  }

  .right {
   float: right;
   width: 60px;
  }

  .bottom {
   clear: both;
   text-align: center;
  }

  .item {
   margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
   padding: 8px 10px;
  }
 }
</style>

主题

Element Tooltip 文字提示的使用示例

<el-tooltip content="Top center" placement="top">
 <el-button>Dark</el-button>
</el-tooltip>
<el-tooltip content="Bottom center" placement="bottom" effect="light">
 <el-button>Light</el-button>
</el-tooltip>

更多 Content

Element Tooltip 文字提示的使用示例

<el-tooltip placement="top">
 <div slot="content">多行信息<br/>第二行信息</div>
 <el-button>Top center</el-button>
</el-tooltip>

高级扩展

Element Tooltip 文字提示的使用示例

<template>
 <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">
  <el-button @click="disabled = !disabled">点击{{disabled ? '开启' : '关闭'}} tooltip 功能</el-button>
 </el-tooltip>
</template>
<script>
 export default {
  data() {
   return {
    disabled: false
   };
  }
 };
</script>

Element Tooltip 文字提示的使用示例

Attributes

Element Tooltip 文字提示的使用示例

Element Tooltip 文字提示的使用示例

到此这篇关于Element Tooltip 文字提示的使用示例的文章就介绍到这了,更多相关Element Tooltip 文字提示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
JavaScript库 开发规则
Jan 31 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
javascript iframe跨域详解
Oct 26 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
JS实现密码框效果
Sep 10 Javascript
Element Popover 弹出框的使用示例
Jul 26 #Javascript
Element Card 卡片的具体使用
Jul 26 #Javascript
Element Carousel 走马灯的具体实现
Jul 26 #Javascript
three.js欧拉角和四元数的使用方法
Jul 26 #Javascript
Element Collapse 折叠面板的使用方法
Jul 26 #Javascript
Element Input输入框的使用方法
Jul 26 #Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
php和asp语法上的区别总结
2019/05/12 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
vue组件间通信解析
2017/03/01 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python实现邮件发送功能
2019/08/10 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
一套软件开发工程师笔试题
2015/05/18 面试题
学校教研活动总结
2014/07/02 职场文书
交通安全责任书范本
2014/07/24 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
公司经营目标责任书
2015/01/29 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL