Tablesorter列选择器按钮title被弹窗占用，如何恢复原生tooltip？

我太懂这个坑了——Bootstrap Popover默认会"霸占"元素的title属性当作弹窗标题，直接把原生tooltip给覆盖了。下面给你两种简单的解决办法，轻松找回原生悬停提示：

问题根源 #

当你给绑定了Popover的按钮加title属性时，Bootstrap会自动把这个值抓取来当Popover的顶部标题，浏览器的原生tooltip自然就出不来了。

解决方案 #

方法1：拆分属性，各司其职 #

把原生tooltip的内容留在title属性，给Popover单独指定标题（或者留空）。我们可以用Bootstrap的data-original-title属性来区分：

<!-- 按钮保留title作为原生tooltip，data-original-title设为空（或自定义弹窗标题） -->
<button id="popover" class="btn btn-primary" title="你的原生Tooltip内容" data-original-title=""> Show/hide column </button>

然后初始化Popover时明确设置title选项：

$('#popover')
.popover({
  placement: 'right',
  html: true,
  content: $('#popover-target'),
  title: '' // 这里设为空，弹窗顶部就不会显示标题了
});

这样浏览器会正常读取title显示原生tooltip，Popover也不会再抢这个值。

方法2：JS层面直接阻断Popover读取title #

如果你不想改HTML，直接在初始化Popover时强制设置title选项为空，让Bootstrap不去碰元素的title属性：

$('#popover')
.popover({
  placement: 'right',
  html: true,
  content: $('#popover-target'),
  title: () => '' // 用函数返回空字符串，彻底禁用Popover的标题功能
});

这时候你的按钮title="whatever"完全不受影响，鼠标悬停时原生tooltip正常显示，Popover顶部也不会出现这个内容。

小提示 #

之后如果要改原生tooltip的内容，直接修改按钮的title属性就行，和Popover的功能完全不冲突。

内容的提问来源于stack exchange，提问作者Ricard Espinàs Llovet