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

Pour les personnes qui préfèrent la solution JavaScript. En Bootstrap 4, tip() est devenu getTipElement() et retourne un objet sans jQuery. Donc, pour changer la largeur du popover dans Bootstrap 4, vous pouvez utiliser :

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

Answer 2

Avec l'aide de ce qu'@EML a décrit ci-dessus concernant le popover sur les fenêtres modales et aussi le code montré par @2called-chaos, voici comment j'ai résolu le problème.

J'ai une icône sur la fenêtre modale qui, lorsque cliquée, affiche la popup

Mon HTML

Mon Script

$('[rel=popover]').popover({
    placement: 'bottom',
    html: 'true',
    container: '#name-of-modal-window .modal-body'
}).on("show.bs.popover", function () { 
$(this).data("bs.popover").tip().css("max-width", "600px"); });

Answer 3

    Nom :

Essentiellement, j'ai placé le code du popover dans la div de la ligne, au lieu de la div de l'entrée. Problème résolu.

Answer 4

Voici la façon de le faire sans coffeescript en utilisant hover:

$(".product-search-trigger").popover({
    trigger: "hover",
    container: "body",
    html: true,
    placement: "left"
  }).on("show.bs.popover", function() {
    return $(this).data("bs.popover").tip().css({
      maxWidth: "300px"
    });
  });
});

Answer 5

Vous pouvez utiliser l'attribut data-container="body" dans un popover