Почему атрибут заголовка html и twitter bootstrap data-original-title являются взаимоисключающими?

У меня есть элемент div HTML, который при щелчке отображает всплывающее окно 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 принимает значение атрибута title и отображает это как заголовок всплывающего окна, а не использование data-original-title. Любой способ заставить обе работать вместе, как предполагалось?

Ответ 1

Это связано с тем, что javascript popover расширяет 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 имеет атрибут title, атрибут title-title заменяется атрибутом title.

Изменить В принципе, мой ответ будет простым способом. Вам придется немного модифицировать bootstrap js, хотя я бы не рекомендовал это в этом случае. Может быть, использовать более старую версию загрузчика, которая может не иметь этого кода?

Ответ 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 и заголовок для браузера mouseover:

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