Come si disabilita il titolo nel plug-in popover di Twitter Bootstrap?

Question

Sto usando il popover per visualizzare un'immagine che non richiede un titolo. Se non si imposta "titolo", viene comunque visualizzata un'area in cui si trova il titolo. Come lo spegni completamente?

Follow-up: volevo che i rispondenti mantenessero i loro punti, ma ho pubblicato la mia implementazione finale come risposta separata qui sotto.

Answer 1

baptme di suggerire è ok, ma il modo migliore sarebbe quello di specificare il titolo del tuo popover e in realtà lo nascondi completamente come esistono ancora margini con un'altezza di 0.

.popover-title { display: none; } 

Edit: appena quicky guardato alla fonte e sembra che ci sia un'opzione non documentata:

$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, { 
    placement: 'right' 
    , content: '' 
    , template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' 
    }) 

Quando si dichiara la tua popover utilizzando JS, cercare di ignorare il modello e specificare un titolo nascosto.

$('#example').popover({ 
    template: '...<h3 class="popover-title" style="display: none"></h3>...' 
}); 

Il motivo dico che non rimuoverlo è esso può causare errori di runtime se l'elemento non esiste. Vedi il commento di Sherbrow.

Answer 2

il modo più semplice è quello di fare impostare height:0px sulla classe .popover-title e non usare data-original-title

CSS:

.popover-title { height: 0px;} 

Answer 3

Ho terminato utilizzando una combinazione delle tecniche suggerite da @Terry e @Sherbow. Mostra l'immagine, ma non il titolo (solo per questo popup).

<a href="#" id="contributors" rel="popover">contributors</a> 

... 

<script> 
var contributor_img = '<img src="my_img/contributor.png" />' 


$(function() 
{ $('#contributors').popover({ 
    content: contributor_img, 
    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>' }); 
}); 
</script> 

Answer 4

È possibile anche scrivere una funzione per rimuovere l'elemento:

function removeTitle(){ 
    $('.popover-title').remove(); 
} 

$("a[data-toggle=popover]") 
    .popover({ 
    html: true, 
    animation: true 
}) 
.click(function(e) { 
    removeTitle(); 
    e.preventDefault() 
}) 

Answer 5

Nel Bootstrap 2.3+ il titolo nasconde automaticamente se è vuoto.

http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/