Changer la largeur de Bootstrap popover

Question

Je conçois une page en utilisant Bootstrap 3. J'essaie d'utiliser une info-bulle avec placement: right sur un élément d'entrée. Le nouveau Bootstrap garantit que si vous utilisez form-control, vous avez essentiellement un élément d'entrée en pleine largeur.

Le code HTML ressemble à ceci:

        Nom:

La largeur des info-bulles est trop faible, à mon avis, car il n'y a plus de place dans la div. Je veux que le formulaire d'entrée soit à gauche, et une info-bulle large à droite.

En gros, je cherche une solution où je n'ai pas à outrepasser Bootstrap.

Le JsFiddle est attaché. La deuxième option d'entrée. N'ai pas beaucoup utilisé jsfiddle donc je ne sais pas, mais essayez d'augmenter la taille de la boîte de sortie pour voir les résultats, sur les écrans plus petits vous ne le verriez même pas. http://jsfiddle.net/Rqx8T/

Answer 1

J'ai utilisé ceci (fonctionne bien) :

.popover{
   background-color:#b94a48;
   border:none;
   border-radius:unset;
   min-width:100px;
   width:100%;
   max-width:400px;
   overflow-wrap:break-word;
}

Answer 2

 Aperçu   

        Votre contenu                   

Je finis par définir la largeur de la div "popover-content" au nombre souhaité. (d'autres ids ou classes ne fonctionneront pas.....) Bonne chance!

  #popover-content{
      width: 600px;
  }

Answer 3

J'ai trouvé cette solution pour Bootstrap 5+ lorsque je voulais changer la largeur d'un popover spécifique. Ajouter une customClass a fonctionné pour moi :

Html :

     Comment faire :
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ultricies elit, mattis egestas nisl suscipit ac. Duis ipsum augue, convallis sed nunc in, pellentesque luctus elit. Duis porttitor massa sed finibus rutrum. Nunc eu risus ultrices, volutpat leo eget, pulvinar eros. Donec rhoncus mattis sem, ac iaculis turpis semper non. Cras dapibus tristique risus, eu tincidunt elit condimentum fermentum. Nunc at dignissim ante, nec efficitur felis. Duis mauris magna, fermentum eu egestas vel, vehicula at est. Nullam dapibus nisi non purus pellentesque ultrices. Nulla pulvinar neque quis ipsum semper, a congue tortor aliquet. Suspendisse vulputate porttitor feugiat. Maecenas pretium porta mauris feugiat pellentesque. Integer tempus risus eu pretium consectetur.

Donec interdum, eros ac imperdiet pretium, magna risus laoreet tellus, in finibus justo sapien et lacus. Pellentesque placerat ligula at metus sollicitudin, et convallis nisi luctus. Vivamus non arcu vel ex pharetra auctor. Morbi efficitur sed turpis id finibus. Sed porttitor luctus quam sed laoreet. Nunc facilisis finibus aliquet. Maecenas pellentesque sem dui, sed blandit tortor placerat ut. Donec tempor ipsum in sem fermentum, vel vulputate magna egestas.

JS :

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popover-help"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl,{
        content: function() {
                return $('#popover-help-container').html();
            },
        html: true,
        placement: 'bottom',
        sanitize: false,
        customClass: 'popover-large'
        });
    })

css :

.popover-large {
  max-width: 50%; /* Largeur maximale du popover (en fonction du conteneur !) */
}

Answer 4

Vous pouvez changer le modèle de votre popover. Soit avec l'attribut data-template ou avec la partie pertinente dans la fonction qui le configure :

    cliquezmoi

Answer 5

Sur Bootstrap 4, vous pouvez facilement revoir l'option du modèle, en remplaçant la largeur maximale :

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: ''
});

C'est une bonne solution si vous avez plusieurs popovers sur la page.