Warum sind html title attribute und twitter bootstrap data-original-titles gegenseitig exklusiv?

Question

Ich habe ein HTML-Div-Element, das nach dem Klicken ein Twitter-Bootstrap-Popover anzeigt. Aktuelle Code sieht wie folgt aus:

<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 ist, dass twitter Bootstrap nimmt der Titel Attributwert und zeigt, dass, wie der Titel des Popup statt Daten-Original-Titel zu verwenden. Irgendeine Möglichkeit, die beiden wie beabsichtigt zusammenzuarbeiten?

Answer 1

Dies ist, weil das popover javascript das tooltip javascript erweitert, und das tooltip javascript war (glaube ich) beabsichtigt, die standard tooltip zu ersetzen, die durch das title attribute gesetzt wird.

Dieser Code ist der Täter (in Bootstrap-tooltip.js, wie 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', '') 
    } 
} 

Wo, wenn ein Titel Attribut ist dann das Daten-Original-Titel-Attribut mit dem Titelattribut ersetzt wird.

Bearbeiten Grundsätzlich meine Antwort wäre es gibt keinen einfachen Weg. Sie müssten den Bootstrap js ein wenig modifizieren, obwohl ich das in diesem Fall nicht wirklich empfehlen würde. Vielleicht eine ältere Version des Bootstrap-Popover verwenden, die diesen Code möglicherweise nicht enthält?

Answer 2

Ich hatte das gleiche Problem und konnte keine andere Bootstrap-Version verwenden, also entschied ich mich, meine Funktion in den Popover-Prototyp zu injizieren. Versuchen Sie nicht dieses zu Hause:

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

Jetzt können Sie einen Titel für den popover hinzufügen und einen Titel für die Browser 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" 
/>