Question

我有一个HTML div元素，点击后会显示一个twitter bootstrap popover。当前代码如下所示：

<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

这是因为popover 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虽然在这种情况下我不会真的推荐。也许使用旧版本的bootstrap popover可能没有那个代码？

Answer 2

我遇到了同样的问题并且无法使用不同的Bootstrap版本，因此我决定将我的函数注入到popover原型中。 不要在家尝试：

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

现在，您可以为popover添加标题，并为浏览器鼠标悬停添加标题：

<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"
/>

为什么html title属性和twitter bootstrap data-original-title互斥？

2 个答案: