指令：当文字显示不全时显示tooltip提示框

问题描述：用table布局显示数据列表时，某列数据长度不确定时，一般会通过添加样式使文字超出某个长度时显示为...，同时使用tooltip显示出完整信息，此时需要编写指令判断文字宽度是否超出预定值，从而实现当文字显示不全时给出提示框，文字显示完全时无需给出提示框。

1. 指令代码

(function () {'use strict';angular.module('demo').directive('widthOverflow', widthOverflow);function widthOverflow () {var directive = {restrict: 'A',scope: {enableTooltip: '='},link: linker};return directive;function linker (scope, element, attrs) {var onMouseOver = function () {var $el = $(element);if ($el[0].offsetWidth < $el[0].scrollWidth) {scope.enableTooltip = true;} else {scope.enableTooltip = false;}scope.$apply();};element.on('mouseover', onMouseOver);element.bind('$destroy', function () {element.unbind('mouseover');});}}
})();

2. html页面引用指令

<span class="text-ellipsis" style="width: 100px;"width-overflowenable-tooltip="enableTooltip"uib-tooltip="完整的文字信息"tooltip-enable="enableTooltip">完整的文字信息
</span><style>.text-ellipsis{font-weight: normal;display: inline-block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: default;}
</style>

转载于:https://www.cnblogs.com/chenboxi/p/9202740.html

指令：当文字显示不全时显示tooltip提示框相关推荐

iView表格显示图片和文字过长显示省略号，并且Tooltip提示
iView表格显示图片和文字过长显示省略号,并且Tooltip提示效果图代码 {title: 'LOGO',key: 'logo',align: "center",render ...
echarts隐藏掉一条曲线，并且tooltip提示框中不显示
echarts隐藏掉一条曲线,并且tooltip提示框中不显示两步走: 1.隐藏掉一条曲线 series: [{name: '...',type: 'line',symbolSize: 0, // ...
Echarts数据可视化tooltip提示框，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件
tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...
html input tooltip,BootStrap tooltip提示框使用小结
提示框提示框的基本使用方式为: test message data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供 ...
Echart遇到的问题：tooltip提示框大小异常
Echart遇到的问题:tooltip提示框大小异常参考文章: (1)Echart遇到的问题:tooltip提示框大小异常 (2)https://www.cnblogs.com/wyhluckdog ...
echarts中tooltip提示框位置控制
关键代码: position: function(point, params, dom, rect, size) {//其中point为当前鼠标的位置,size中有两个属性:viewSize和cont ...
echarts 地图tooltip提示框超出浏览器窗口怎么隐藏？
echarts tooltip提示框超出浏览器窗口怎么隐藏? 在使用echarts做图时,发现tooltip默认会超出浏览器窗口外,刚开始想做边境检测,试着写了一些代码发现太麻烦了,需要上下左右做多次 ...
html 原生 tooltip,原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
echarts 饼图每块颜色_读者提问，如何让 tooltip 提示框内显示饼图
效果截图前些天有读者问,ECharts 的提示框(tooltip)内,能不能添加一个饼图? 我之前倒是看到过用饼图作为散点图数据点的例子,感觉应该有办法--但是提示框和那个不太一样,估计需要研究一下 ...

指令：当文字显示不全时显示tooltip提示框

指令：当文字显示不全时显示tooltip提示框相关推荐

最新文章

热门文章