为什么html title属性和twitter bootstrap data-original-title是互斥的?

Question

我有一个HTMLdiv元素，当点击显示一个twitter引导弹出窗口。当前代码如下所示:

<div class="popover" title="supplementary info about html element" 
  data-original-title="popover title" data-content="popover content...">
</div>
$(document).on('ready', function() {
  App.Utils.Popover.enableAll();
});
App.Utils.Popover = {
  enableAll: function() {
    $('.popover').popover(
      {
        trigger: 'click',
        html : true,
        container: 'body',
        placement: 'right'
      }
    );
};

问题是twitter bootstrap采用title属性值并将其显示为弹出窗口的标题，而不是使用data-original-title。有什么办法能让这两者按预期一起工作吗?

Answer 1

这是因为弹出窗口javascript扩展了工具提示javascript，而工具提示javascript(我相信)是为了取代由title属性设置的默认工具提示。

这段代码是罪魁祸首(在bootstrap-tooltip.js中，像253ish)

, fixTitle: function () {
  var $e = this.$element
  if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
    $e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
  }
}

如果存在title属性，则data-original-title属性将被title属性替换。

编辑基本上我的答案是没有简单的方法。你必须对bootstrap js进行一些修改，尽管我不建议在这种情况下这样做。也许使用旧版本的引导弹出窗口可能没有这些代码?

Answer 2

我有同样的问题，不能使用不同的Bootstrap版本，所以我决定将我的函数注入到弹出窗口原型中。不要在家里尝试:

<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script type="text/javascript">
    // dirty hack
    $.fn.popover.Constructor.prototype.fixTitle = function () {};
</script>

现在你可以为弹出窗口和浏览器的鼠标上方添加一个标题:

<i data-placement="bottom" data-trigger="click"
   bs-popover="'views/partials/notifications.html'" data-html="true" 
   data-unique="1" 
   data-original-title="This title will be used by the popover" 
   title="This title will be used by a browser for a mouseover"
/>