删除文章

确定要删除这篇文章吗?

取消
确定

bootstrap有省略点才显示tooltip

     阅读(1432)  2017-04-19 13:12:36

让太长的文本显示省略点

如果table中的td内容太长了可以使用省略点,给td标签增加如下类:

.autocut {  
  max-width:180px;  
  overflow:hidden;  
  white-space:nowrap;  
  text-overflow:ellipsis;  
  -o-text-overflow:ellipsis;  
  -icab-text-overflow: ellipsis;  
  -khtml-text-overflow: ellipsis;  
  -moz-text-overflow: ellipsis;  
  -webkit-text-overflow: ellipsis;  
}

增加tooltip

bootstrap中tooltip常见用法如下:

<td class="autocut" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</td>

title就是鼠标hover上去显示的tooltip内容 问题是不管有没有省略点td标签都有tooltip出现,这一点看起来不太友好,在没有省略点能完全展示内容的时候不应该有tooltip

实现方法

html代码

<td class="autocut">请悬停在我的上面</td>

js代码,params-table是外层的div

$('#params-table').on('mouseenter', "table td", function() {
  // 判断有没有省略点
  if (this.offsetWidth < this.scrollWidth) {
    $(this).attr('data-toggle', 'tooltip').attr('title', $(this).text());
  }
});
$('#params-table').on('mouseleave', 'table td', function() {
  $(this).attr('data-toggle', '');
});

在鼠标进入的时候给td标签加上bootstrap的tooltip属性,离开的时候去掉

文章评论

Keep it simple,stupid
文章数
303
总访问量
491375
今日访问
1751
最近评论

tujiaw : registerThreadInactive:如果当前没有激活的线程,就去激活线程,让等待的线程去执行任务。
hgzzx : 佩服佩服。 请教:registerThreadInactive的作用是什么?
xuehaoyun : 很不错,来围观一下
tujiaw : 抱歉csdn code服务关闭了,这个代码我也找不到了
于淞 : 你好,这个文章的源码能分享一下吗,songsong9181@163.com,谢谢了 上面的写错了
于淞 : 你好,这个文章的源码能分享一下吗,838106303@163.com,谢谢了 上面的链接不能用了
tujiaw : 多谢多谢
essaypinglun college-paper.org : 很好的博客,赞赞
Folly : 这个实现有点奇怪,Qt为什么没有统一的比对方法。
过多s : alert("hello, world!")
回到顶部