指令:当文字显示不全时显示tooltip提示框
问题描述:用table布局显示数据列表时,某列数据长度不确定时,一般会通过添加样式使文字超出某个长度时显示为...
,同时使用tooltip显示出完整信息,此时需要编写指令判断文字宽度是否超出预定值,从而实现当文字显示不全时给出提示框,文字显示完全时无需给出提示框。
1. 指令代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | ( 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页面引用指令
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < span class="text-ellipsis" style="width: 100px;" width-overflow enable-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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步