Why is html title attribute and twitter bootstrap data-original-title mutually exclusive?

Question

I have an HTML div element that when clicked displays a twitter bootstrap popover. Current code looks like this:

<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'
      }
    );
};

Problem is that twitter bootstrap takes the title attribute value and displays that as the title of the popup instead of using data-original-title. Any way to make the two work together as intended?

Answer 1

This is because the popover javascript extends the tooltip javascript, and the tooltip javascript was (i believe) intended to replace the default tooltip that is set by the title attribute.

This code is the culprit (in bootstrap-tooltip.js, like 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', '')
  }
}

Where if there is a title attribute then the data-original-title attribute is replaced by the title attribute.

Edit Basically my answer would be there is no easy way. You would have to mod the bootstrap js a bit though I wouldn't really recommend that in this case. Maybe use an older version of the bootstrap popover that might not have that code in there?

Answer 2

I had the same problem and wasn't able to use a different Bootstrap version, so I decided to inject my function into the popover prototype. Do not try this at home:

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

Now you can add a title for the popover and a title for the browsers 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"
/>