13

クリックするとTwitterのブートストラップポップオーバーを表示するHTMLdiv要素があります。現在のコードは次のようになります。

<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ブートストラップがtitle属性値を取得し、data-original-titleを使用する代わりに、それをポップアップのタイトルとして表示することです。2つを意図したとおりに連携させる方法はありますか？

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属性に置き換えられます。

編集基本的に私の答えは簡単な方法はないということです。この場合、私は実際にはお勧めしませんが、ブートストラップjsを少し変更する必要があります。たぶん、そこにそのコードがないかもしれない古いバージョンのブートストラップポップオーバーを使用しますか？

于 2013-03-19T01:11:35.473 に答える
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"
/>
于 2013-11-28T14:59:08.210 に答える