web-dev-qa-db-fra.com

Bootstrap Popover flèche et positionnement de la boîte

J'utilise Bootstrap Popovers pour afficher des informations sur un lien en survol, avant de cliquer sur le lien . Il fonctionne actuellement, mais les liens sont affichés dans un menu déroulant en haut de la page. Lorsque le premier lien contient beaucoup d'informations à ce sujet, le haut de la fenêtre disparaît en haut de la page, vous ne pouvez donc pas en voir le contenu. J'essaie de faire en sorte que la flèche de popover apparaisse en haut à gauche de la popover (par opposition au centre-gauche comme il le fait actuellement) et que le haut de la boîte de popover soit au même niveau que la flèche si cela a du sens.

$('.popOver').popover({
    trigger: 'hover',
    html: true
});

Ce qui précède fonctionne bien, mais je ne crois pas que les options de popover puissent m'aider ici. C’est le CSS que je dois changer, mais c’est plutôt long à poster, donc je cherchais juste un spécialiste du bootstrap pour me diriger dans la bonne direction.
Merci.

javascriptjquerycsstwitter-bootstrappopover
13
Shamrockonov

Vous pouvez personnaliser l’emplacement du popover ou sa flèche pour manipuler le CSS .popover une fois le popover affiché.

Par exemple, cela pousse le haut de la fenêtre vers le bas de 22 pixels.

$('[data-toggle=popover]').on('shown.bs.popover', function () {
  $('.popover').css('top',parseInt($('.popover').css('top')) + 22 + 'px')
})

Démo de travail: http://bootply.com/88325

24
Zim

Je recommande d'utiliser la méthode de placement plutôt que l'événement shown.bs.popover .Cela ne déclenchera pas de saut popover lorsque l'élément est affiché.

Voilà comment cela fonctionne:

$('[data-toggle=popover]').popover({
  placement: function(context, source) {
    var self = this;
    setTimeout(function() { 
      self.$arrow.css('top', 55);
      self.$tip.css('top', -45);
    }, 0);
    return 'right';
  },
});
5
HaNdTriX

Mon cas d'utilisation est que l'emplacement de popover est top et je dois supprimer la flèche. 

J'ai suivi la solution fournie par @Skelly pendant que j'utilisais bootstrap 3.2.0 . Un problème est que le flash en surbrillance en tant que propriété css top est mis à jour dans le shown.bs.popover.

En fait, vous pouvez remplacer la propriété template lors de l'initialisation du popover et y ajouter un margin-top (margin-left si l'emplacement est à gauche/à droite).

$('[data-toggle=popover]').popover({
  placement: 'top',
  template: '<div class="popover" role="tooltip" style="margin-top:10px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

démo: http://www.bootply.com/gWwmO5XdbL

2
Edward Fung

J'avais des problèmes avec le popover en haut donc je ne pouvais pas le voir. Cela a résolu le problème pour moi

// Move things around if the popover is clipped on top.
if (parseInt($('.popover').position().top) < 10) {
  var arrow_position = parseInt($(this).position().top);
  $('.popover').css('top', 10 + 'px');
  $('.popover .arrow').css('top', arrow_position + 'px');
}
0
mikeytown2