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?