13

我有一个 HTML div 元素，单击该元素时会显示一个 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。有什么方法可以使两者按预期协同工作？

4

2 回答 2

10

这是因为弹出框 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 进行一些修改。也许使用可能没有该代码的旧版本的引导弹出窗口？

于 2013-03-19T01:11:35.473 回答
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>

现在您可以添加弹出框的标题和浏览器鼠标悬停的标题：

<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"
/>
于 2013-11-28T14:59:08.210 回答