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