web-dev-qa-db-fra.com

bootstrap popover: positionnement avancé

J'essaie de positionner un popover Twitter-bootstrap pour un déclencheur qui se trouve dans le coin en haut à droite d'une page Web large de 960 pixels. la flèche est donc en haut à droite de la fenêtre popover).

Malheureusement, le «placement»: le positionnement «du bas» ne suffit pas, car il sera centré sous la gâchette.

Je cherche une solution qui placera le popover statiquement en dessous et à gauche de la gâchette. J'ai lu des tonnes de questions mais n'en ai trouvé aucune.

Astuces?

javascriptcsspositiontwitter-bootstrappopover
50
koichirose

Cela marche. Testé.

.popover {
    top: 71px !important;
    left: 379px !important;
}
32
rboarman

Une solution simple

Ajoutez simplement un attribut à votre ami popover!

Fiddle

Voir mon violon si vous êtes pressé

Objectif principal

Nous voulons ajouter un identifiant ou une classe à un popover particulier afin de pouvoir le personnaliser comme bon nous semble via CSS.

Veuillez noter que nous ne voulons pas personnaliser tous les popovers! C'est une idée terrible (pour l’instant, la réponse acceptée est une idée DIFFICILE ..)

Exemple

Voici un exemple simple - affichez le popover comme ceci:

 enter image description here

html:

<button id="my-button" data-toggle="popover">My Button</button>

js:

// We add the id 'my-popover'
$("#my-button").popover({
    html : true,
    placement: 'bottom'
}).data('bs.popover').tip().attr('id', 'my-popover');

css:

#my-popover {
    left: -169px!important;
}

#my-popover .arrow {
    left: 90%
}
17
Mick

J'ai créé un plugin jQuery qui fournit 4 emplacements supplémentaires: TopLeft, topRight, bottomLeft, bottomRight

Vous n'incluez que le js minifié ou le js non mininé et vous avez le css correspondant (minifié ou non miné) dans le même dossier.

https://github.com/dkleehammer/bootstrap-popover-extra-placements

13
dkleehammer

Popover's Viewport

La meilleure solution qui fonctionnera pour vous dans toutes les occasions, en particulier si votre site Web a une largeur fluide, consiste à utiliser l'option viewport de Bootstrap Popover.

Cela fera que la largeur de popover prenne dans un sélecteur que vous avez attribué. Donc, si le bouton de déclenchement se trouve à droite de ce conteneur, la flèche d’amorçage s’affichera également à droite pendant que la fenêtre popover se trouve dans cette zone . Voir jsfiddle.net

Vous pouvez également utiliser padding si vous voulez de l'espace dans le conteneur Edge. Si vous ne voulez pas de padding, utilisez simplement viewport: '.container'

$('#popoverButton').popover({
   container: 'body',
   placement: "bottom",
   html: true,   
   viewport: { selector: '.container', padding: 5 },
   content: '<strong>Hello Wooooooooooooooooooooooorld</strong>'
 });

dans l'exemple html suivant:

<div class="container">
   <button type="button" id="popoverButton">Click Me!</button>
</div>

et avec CSS:

.container {
  text-align:right;
  width: 100px;
  padding: 20px;
  background: blue;
}
9
Datsos

J'ai résolu ce problème (partiellement) en ajoutant des lignes de code à la bibliothèque css bootstrap. Vous devrez modifier tooltip.js, tooltip.less, popover.js et popover.less 

dans tooltip.js, ajoutez ce cas dans l'instruction switch

case 'bottom-right':
          tp = {top: pos.top + pos.height, left: pos.left + pos.width}
          break

dans tooltip.less, ajoutez ces deux lignes dans .tooltip {}

&.bottom-right { margin-top:   -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }

faites la même chose dans popover.js et popover.less. En gros, partout où vous trouvez du code où d’autres positions sont mentionnées, ajoutez votre position souhaitée en conséquence.

Comme je l'ai mentionné plus tôt, cela a partiellement résolu le problème. Mon problème maintenant est que la petite flèche de la popover n'apparaît pas.

note: si vous voulez avoir le popover en haut à gauche, utilisez l'attribut top de '.top' et l'attribut gauche de '.left'

7
khaled

Pour démarrer 3.0.0:

.popover{ right:0!important; }

Et modifier aussi 

.popover { max-width:WWWpx!important; }

où WWW est votre largeur maximale correcte pour afficher votre contenu popover.

4
manufosela

Je devais apporter les modifications suivantes pour que le popover se positionne en dessous avec quelques chevauchements et pour afficher la flèche correctement. 

js  

case 'bottom-right':  
    tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}  
    break

css  

    .popover.bottom-right .arrow {  
      left: 20px; /* MODIFIED */  
      margin-left: -11px;  
      border-top-width: 0;  
      border-bottom-color: #999;  
      border-bottom-color: rgba(0, 0, 0, 0.25);  
      top: -11px;  
    }  
    .popover.bottom-right .arrow:after {  
      top: 1px;  
      margin-left: -10px;  
      border-top-width: 0;  
      border-bottom-color: #ffffff;  
    }

Cela peut être étendu pour les emplacements de flèche ailleurs .. profitez-en!

3
siruscoder

Sûr que vous pouvez. Heureusement, il existe un moyen propre de le faire et cela se trouve également dans la documentation Bootstrap popover/tooltip.

let mySpecialTooltip = $('#mySpecialTooltip); 
mySpecialTooltip.tooltip({
 container: 'body',
 placement: 'bottom',
 html: true,
 template: '<div class="tooltip your-custom-class" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
});

dans votre fichier css: -

.your-custom-class {
 bottom: your value;
}

Assurez-vous d'ajouter le modèle dans la documentation de l'info-bulle de bootstrap et d'ajouter votre nom de classe personnalisé et son style à l'aide de css.

Et c'est tout. Vous pouvez trouver plus d'informations à ce sujet sur https://getbootstrap.com/docs/4.0/components/tooltips/

1
Nandun Malinda

Peut-être que vous n'avez pas besoin de cette logique pour un comportement réactif.

Par exemple.

placement: 'auto left'

Bootstrap 3 a la valeur auto pour placement. Documentation Bootstrap :

Lorsque "auto" est spécifié, il réoriente dynamiquement l'info-bulle. Par exemple, si placement est "auto left", l'info-bulle s'affichera autant que possible à gauche, sinon elle apparaîtra à droite.

0
Horacio Alexandre Fernandes

Si vous jetez un coup d'œil à codes sources d'amorçage , vous remarquerez que la position peut être modifiée à l'aide de la marge.

Donc, vous devez d’abord changer le modèle popover pour ajouter sa propre classe css afin de ne pas entrer en conflit avec d’autres popovers:

$(".trigger").popover({
  html: true,
  placement: 'bottom',
  trigger: 'click',
  template: '<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});

Ensuite, en utilisant css, vous pouvez facilement changer de position de popover:

.popover.popover--topright {
  /* margin-top: 0px; // Use to change vertical position */
  margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
  left: 88% !important; /* fix arrow position */
}

Cette solution n'influencerait pas les autres popovers que vous avez. La même solution peut également être utilisée dans les info-bulles, car la classe popover hérite de la classe info-bulle.

Voici un simple jsFiddle

0
Buksy