Perché l'attributo title html e i dati bootstrap twitter-original-title si escludono a vicenda?

Question

Ho un elemento div HTML che quando cliccato mostra un popover di bootstrap twitter. codice attuale è simile al seguente:

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

Il problema è che Twitter bootstrap prende il titolo valore di attributo e mostra che, come il titolo del popup invece di utilizzare i dati originali-titolo. Un modo per far lavorare i due insieme come previsto?

Answer 1

Questo perché il javascript popover estende il tooltip javascript e il tooltip javascript era (credo) destinato a sostituire il tooltip predefinito impostato dall'attributo title.

Questo codice è il colpevole (in bootstrap-tooltip.js, come 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', '') 
    } 
} 

Dove se c'è un attributo titolo l'attributo dati originali-titolo è sostituito dall'attributo titolo.

Modifica Fondamentalmente la mia risposta sarebbe che non esiste un modo semplice. Dovresti modificare un po 'il bootstrap js anche se in questo caso non lo consiglierei. Forse usi una versione precedente del popover bootstrap che potrebbe non avere quel codice lì dentro?

Answer 2

Ho avuto lo stesso problema e non ero in grado di utilizzare una versione di Bootstrap diversa, quindi ho deciso di iniettare la mia funzione nel prototipo di popover. Non provateci a casa:

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

Ora è possibile aggiungere un titolo per la popover e un titolo per i 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" 
/>