web-dev-qa-db-ja.com

htmlタイトル属性とTwitter bootstrap data-original-titleが相互に排他的であるのはなぜですか？

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

htmltwitter-bootstraptitlepopover
12
keruilin

これは、popoverjavascriptがtooltipjavascriptを拡張し、tooltip javascriptがtitle属性によって設定されたデフォルトのtooltipを置き換えることを意図していたためです（私は信じています）。

このコードが原因です（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', '')
  }
}

タイトル属性がある場合、data-original-title属性はtitle属性に置き換えられます。

編集基本的に私の答えは簡単な方法はないということです。 bootstrap jsを少し変更する必要がありますが、この場合はあまりお勧めしません。たぶん、古いバージョンのbootstrap popover thatそこにそのコードがないかもしれませんか？

9
hajpoj

同じ問題が発生し、別の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"
/>
2
Sonata