Je conçois une page en utilisant Bootstrap 3. J'essaie d'utiliser un popover avec placement: rightsur un élément d'entrée. Le nouveau Bootstrap garantit que si vous utilisez, form-controlvous disposez essentiellement d'un élément d'entrée pleine largeur.

Le code HTML ressemble à ceci:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover" 
                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

La largeur des popovers est trop faible, à mon avis, car il n'y a plus de largeur dans le div. Je veux le formulaire de saisie sur le côté gauche, et un large popover sur le côté droit.

Surtout, je cherche une solution où je n'ai pas à remplacer Bootstrap.

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

Augmentez la largeur avec CSS

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

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

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

Conteneur d'amorçage Twitter

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

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

Plus d'informations

Le popover est contenu dans l'élément dans lequel il est déclenché. Pour l'étendre "pleine largeur" ​​- spécifiez le conteneur:

// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
    container: 'body'
});

JSFiddle

Consultez le JSFiddle pour l'essayer.

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

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

$(".product-search-trigger")
  .click(-> false) # cancel click on <a> tag
  .popover
    container: "body"
    html: true
    placement: "left"
    title: "<strong>Product search</strong> enter number or name"
  .on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))

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

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: ajoutez le texte suivant à la tête:

<style type="text/css">
    .popover{
        max-width:600px;
    }
</style>

Pour changer la largeur, vous pouvez utiliser css

Pour une taille fixe recherchée

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

Pour largeur max souhaitée:

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

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

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

$('#name').popover({
    template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})

Pour les personnes qui préfèrent la solution JavaScript. Dans Bootstrap 4, tip () est devenu getTipElement () et renvoie un objet no 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");
});

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Fondamentalement, je mets le code popover dans la ligne div, au lieu de la div d'entrée. Résolu le problème.

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

J'ai une icône sur le modal qui, lorsque vous cliquez dessus, devrait apparaître

Mon HTML

<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>

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"); });

Pas de solution finale ici: / Juste quelques réflexions sur la façon de résoudre "proprement" ce problème ...

Version mise à jour (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" au lieu de class = "col-md-") de votre JSFiddle d'origine: http://jsfiddle.net/tkrotoff/N99h7/

Maintenant le même JSFiddle avec votre solution proposée : http://jsfiddle.net/tkrotoff/N99h7/8/
Cela ne fonctionne pas: le popover est positionné par rapport au <div class="col-*">+ imaginez que vous avez plusieurs entrées pour le même<div class="col-*"> ...

Donc, si nous voulons garder le popover sur les entrées (sémantiquement mieux):

• .popover { position: fixed; }: mais à chaque fois que vous faites défiler la page, le popover ne suivra pas le défilement
• .popover { width: 100%; }: pas si bon car vous dépendez toujours de la largeur du parent (ie <div class="col-*">
• .popover-content { white-space: nowrap; }: bon uniquement si le texte à l'intérieur du popover est plus court que max-width

Voir http://jsfiddle.net/tkrotoff/N99h7/11/

Peut-être qu'en utilisant des navigateurs très récents, les nouvelles valeurs de largeur CSS peuvent résoudre le problème, je n'ai pas essayé.

container: 'body'fait normalement l'affaire (voir la réponse de JustAnil ci-dessus), mais il y a un problème si votre popover est dans un modal. Le z-indexplace derrière le modal lorsque le popover est attaché à body. Cela semble être lié au problème BS2 5014 , mais je l'obtiens sur 3.1.1. Vous n'êtes pas censé utiliser un containerde body, mais si vous corrigez le code

   $('#fubar').popover({
   trigger : 'hover',
   html    : true,
   dataContainer : '.modal-body',
   ...etc });

puis vous z-indexrésolvez le problème, mais la largeur du popover est toujours incorrecte.

Le seul correctif que je peux trouver est d'utiliser container: 'body'et d'ajouter des CSS supplémentaires:

.popover { 
  max-width : 400px;
  z-index   : 1060;
}

Notez que les solutions CSS en elles-mêmes ne fonctionneront pas.

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

<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
   data-placement="right" data-trigger="hover" title="Title"
   data-content="Your content"></i>

Voici la façon non-coffeescript de le faire avec le survol:

$(".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"
    });
  });
});

Une solution testée pour Bootstrap 4 beta:

.popover {
        min-width: 30em !important;
    }

Avec l'instruction jQuery:

$('[data-toggle="popover"]').popover({
      container: 'body',
      trigger: 'focus',
      html: true,
      placement: 'top'
    })

Side note, data-container="body"ou container: "body"soit en HTML ou en tant que optionl' popover({})objet n'a pas vraiment faire l'affaire [peut - être le faire un travail , mais seulement en même temps que la déclaration CSS];

N'oubliez pas non plus que Bootstrap 4 beta repose sur popper.js pour son positionnement popover et info-bulle (avant c'était tether.js)

Vous pouvez ajuster la largeur du popover avec les méthodes indiquées ci-dessus, mais la meilleure chose à faire est de définir la largeur du contenu avant que Bootstrap ne le voit et ne fasse son calcul. Par exemple, j'avais une table, j'ai défini sa largeur, puis bootstrap a construit un popover pour lui convenir. (Parfois, Bootstrap a du mal à déterminer la largeur, et vous devez intervenir et tenir sa main)

J'ai utilisé cela (fonctionne bien):

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

 <label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover"  data-placement="right" id="Pops" ></a>  
<div id="popover-content" class="hide">
  <div class="popovermenu">
        Your content                   
  </div>
 </div>

Je termine en définissant la largeur div "popover-content" au nombre que je veux. (les autres identifiants ou classes ne fonctionneront pas .....) Bonne chance!

  #popover-content{
      width: 600px;

  }

vous pouvez également ajouter le data-container = "body" qui devrait faire le travail:

<div class="row">
    <div class="col-md-6">
        <label for="name">Name:</label>
        <input id="name" class="form-control" type="text" 
                         data-toggle="popover" data-trigger="hover"

                         data-container="body"

                         data-content="My popover content.My popover content.My popover content.My popover content." />
    </div>
</div>

Vous pouvez modifier le modèle de votre popover. Soit avec l' data-templateattribut-soit avec la partie pertinente de la fonction qui le configure:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <!-- Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
  <body>
    <span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class=&quot;popover fade top in&quot; style=&quot;max-width:none;&quot; role=&quot;tooltip&quot;><div class=&quot;arrow&quot;></div><h3 class=&quot;popover-title&quot;></h3><div class=&quot;popover-content&quot;></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
  </body>
</html>

Pour un composant tapuscrit:

@Component({
    selector: "your-component",
    templateUrl: "your-template.component.html",
    styles: [`
        :host >>> .popover {
          max-width: 100%;
        }
    `]
})

Dans Angular, ng-bootstrapvous pouvez simplement container="body"accéder au contrôle qui déclenche le popover (comme un bouton ou une zone de texte). Ensuite, dans votre fichier de style global ( style.cssou style.scss), vous devez ajouter .popover { max-width: 100% !important; }. Après cela, le contenu du popover sera automatiquement défini sur sa largeur de contenu.

Dans bootstrap 4, vous pouvez simplement remplacer la valeur par défaut de la variable bootstrap $popover-max-widthdans votre fichier styles.scss comme ceci:

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

En savoir plus sur la substitution des valeurs par défaut de bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

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

$('#myButton').popover({
    placement: 'bottom',
    html: true,
    trigger: 'click',
    template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});

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

Essaye ça:

var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));