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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
js调试工具Console命令详解
Oct 21 Javascript
浅谈javascript的调试
Jan 28 Javascript
javascript实用方法总结
Feb 06 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
node.js处理前端提交的GET请求
Aug 30 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python求众数问题实例
2014/09/26 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
在Python中实现字典反转案例
2020/12/05 Python
python中os.remove()用法及注意事项
2021/01/31 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
护士自我鉴定
2013/10/23 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers