欢迎访问Ningto's博客

Menu
  • 首页
  • 归档
  • 关于
  • 书签
  • 必应壁纸
  • IT聚合
  • 工具
    • 我的工具列表
    • 我的网盘
    • 必应每日壁纸API
    • Html转Markdown
    • 仙尘光标
Menu

bootstrap有省略点才显示tooltip

最后更新 2017-04-19 05:12:36   阅读量 3275

让太长的文本显示省略点

如果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属性,离开的时候去掉

(转载本站文章请注明作者和出处:泞途 - ningto.com)

下一篇 – Robomongo连接远程MongoDB数据库
上一篇 – CHROME开发者工具的小技巧

  1. Web

toningto@outlook.com

推荐文章

Effective Python

Python的几种函数参数类型

标签云

Mac React Database Qt Node.js Javascript Product C/C++ Python Bug Tools Windows Linux Tips Design Go IOS MongoDB Shell Android Mobile Life Java Web MQ Others Boost

推广链接

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

多谢支持,用了好几年,服务很稳定支持多设备!

其他

文章RSS

Copyright © 2016 Welcome To Ningto Blog | 鄂ICP备17003086号-2