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

Augmenter la largeur avec CSS

Vous pouvez utiliser CSS pour augmenter la largeur de votre popover, comme ceci :

/* La largeur maximale dépend du conteneur (plus d'infos ci-dessous) */
.popover{
    max-width: 100%; /* Largeur maximale du popover (selon le conteneur !) */
}

Si cela ne fonctionne pas, vous voudrez probablement utiliser la solution ci-dessous et modifier votre élément container. (Voir le JSFiddle)

---

Container de Twitter bootstrap

Si cela ne fonctionne pas, vous devez probablement spécifier le conteneur :

// Contenir le popover dans le corps et non pas dans l'élément où il a été appelé.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

---

Plus d'infos

Le popover est contenu dans l'élément où il est déclenché. Pour l'étendre sur toute la largeur, spécifiez le conteneur :

// Contenir le popover dans le corps et non pas dans l'élément où il a été appelé.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

---

JSFiddle

Consultez le JSFiddle pour l'essayer.

JSFiddle: http://jsfiddle.net/xp1369g4/

Answer 2

J'ai eu le même problème. J'ai passé pas mal de temps à chercher une réponse et j'ai trouvé ma propre solution :

    .popover{
        max-width:600px;
    }

Answer 3

J'avais aussi besoin d'une popover plus large pour un champ de texte de recherche. J'ai trouvé cette solution Javascript (ici en Coffee):

$(".product-search-trigger")
  .click(-> false) # annuler le clic sur la balise 
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "Recherche de produit entrez le numéro ou le nom"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

La solution de contournement se trouve dans la dernière ligne. Avant que la popover ne s'affiche, l'option max-width est définie sur une valeur personnalisée. Vous pouvez également ajouter une classe personnalisée à l'élément tip.

Answer 4

Pour modifier la largeur, vous pouvez utiliser le css

Pour une taille fixe souhaitée

.popover{
    width:200px;
    height:250px;    
}

Pour une largeur maximale souhaitée:

.popover{
    max-width:200px;
    height:250px;    
}

jsfiddle: http://jsfiddle.net/Rqx8T/2/

Answer 5

Pour changer la largeur du popover, vous pouvez remplacer le modèle :

$('#name').popover({
    template: ''
})