web-dev-qa-db-fra.com

Comment désactiver le titre dans le plugin popover de Twitter Bootstrap?

J'utilise popover pour afficher une image ne nécessitant pas de titre. Si vous ne définissez pas "title", il affiche toujours une zone dans laquelle le titre serait. Comment éteignez-vous cela complètement?

Suivi: je voulais que les répondants gardent leurs points, mais j’ai posté ma mise en œuvre finale en tant que réponse séparée ci-dessous.

twitter-bootstrappopover
23
Scott C Wilson

la suggestion de baptme est acceptable, mais la meilleure solution serait de spécifier le titre de votre popover et de le masquer complètement, car les marges existent toujours avec une hauteur de 0.

.popover-title { display: none; }

Edit: il suffit de regarder rapidement la source et il semble y avoir une option non documentée:

$.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>'
  })

Lorsque vous déclarez votre popover à l'aide de JS, essayez de remplacer le modèle et spécifiez un titre masqué.

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

La raison pour laquelle je dis de ne pas l'enlever est que cela peut provoquer des erreurs d'exécution si l'élément n'existe pas. Voir le commentaire de Sherbrow.

40
Terry

Dans Bootstrap 2.3+, le titre est automatiquement masqué s'il est vide. 

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

12
isherwood

J'ai fini par utiliser une combinaison des techniques suggérées par @Terry et @Sherbow. Affiche l'image mais pas le titre (pour cette fenêtre contextuelle uniquement).

<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>
5
Scott C Wilson

le moyen le plus simple est de définir height:0px sur la classe .popover-title et de ne pas utiliser data-original-title

CSS: 

.popover-title { height: 0px;}
1
baptme

Vous pouvez également écrire une fonction pour supprimer l'élément:

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

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