Ich entwerfe eine Seite mit Bootstrap 3. Ich versuche, ein Popover mit placement: righteinem Eingabeelement zu verwenden. Der neue Bootstrap stellt sicher, dass Sie bei Verwendung form-controlgrundsätzlich ein Eingabeelement in voller Breite haben.

Der HTML-Code sieht ungefähr so ​​aus:

<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>

Die Popover-Breite ist meiner Meinung nach zu gering, da im div keine Breite mehr vorhanden ist. Ich möchte das Eingabeformular auf der linken Seite und ein breites Popover auf der rechten Seite.

Meistens suche ich nach einer Lösung, bei der ich Bootstrap nicht überschreiben muss.

Die angehängte JsFiddle. Die zweite Eingabemöglichkeit. Ich habe jsfiddle nicht oft verwendet, weiß es also nicht, aber versuche, das Ausgabefeld zu vergrößern, um Ergebnisse zu sehen. Auf kleineren Bildschirmen wird es nicht einmal angezeigt. http://jsfiddle.net/Rqx8T/

Erhöhen Sie die Breite mit CSS

Sie können CSS verwenden, um die Breite Ihres Popovers wie folgt zu erhöhen:

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

Wenn dies nicht funktioniert, möchten Sie wahrscheinlich die folgende Lösung und ändern Sie Ihr containerElement. ( Sehen Sie sich die JSFiddle an )

Twitter Bootstrap Container

Wenn das nicht funktioniert, müssen Sie wahrscheinlich den Container angeben:

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

Mehr Info

Das Popover ist in dem Element enthalten, in dem es ausgelöst wird. Um es auf "volle Breite" zu erweitern, geben Sie den Container an:

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

JSFiddle

Sehen Sie sich die JSFiddle an, um sie auszuprobieren.

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

Ich brauchte auch ein breiteres Popover für ein Suchtextfeld. Ich habe mir diese Javascript-Lösung ausgedacht (hier in 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"))

Die Problemumgehung befindet sich in der letzten Zeile. Bevor das Popover angezeigt wird, wird die Option für die maximale Breite auf einen benutzerdefinierten Wert festgelegt. Sie können dem tip-Element auch eine benutzerdefinierte Klasse hinzufügen.

Ich hatte das gleiche Problem. Ich habe einige Zeit auf der Suche nach einer Antwort verbracht und meine eigene Lösung gefunden: Fügen Sie dem Kopf folgenden Text hinzu:

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

Um die Breite zu ändern, können Sie CSS verwenden

Für feste Größe gesucht

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

Für maximale Breite gewünscht:

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

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

Um die Popover-Breite zu ändern, können Sie die Vorlage überschreiben:

$('#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>'
})

Für Leute, die die JavaScript-Lösung bevorzugen. In Bootstrap 4 wurde tip () zu getTipElement () und gibt ein no jQuery-Objekt zurück. Um die Breite des Popovers in Bootstrap 4 zu ändern, können Sie Folgendes verwenden:

}).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>

Grundsätzlich setze ich den Popover-Code in die Zeile div, anstelle der Eingabe div. Problem gelöst.

Mit Hilfe dessen, was @EML oben in Bezug auf Popover in modalen Fenstern beschrieben hat, und des Codes, der von @ 2called-Chaos angezeigt wird, habe ich das Problem auf diese Weise gelöst.

Ich habe ein Symbol auf dem Modal, das beim Klicken auf das Popup angezeigt wird

Mein 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>

Mein Skript

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

Keine endgültige Lösung hier: / Nur ein paar Gedanken, wie man dieses Problem "sauber" löst ...

Aktualisierte Version (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" anstelle von class = "col-md-") Ihrer ursprünglichen JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Jetzt das gleiche JSFiddle mit Ihrer vorgeschlagenen Lösung : http://jsfiddle.net/tkrotoff/N99h7/8/
Es funktioniert nicht: Das Popover ist relativ zum <div class="col-*">+ positioniert. Stellen Sie sich vor, Sie haben mehrere Eingänge für dasselbe<div class="col-*"> ...

Wenn wir also das Popover auf den Eingaben behalten möchten (semantisch besser):

• .popover { position: fixed; }: aber jedes Mal, wenn Sie die Seite scrollen, folgt das Popover nicht dem Bildlauf
• .popover { width: 100%; }: nicht so gut, da Sie immer noch von der übergeordneten Breite abhängen (dh <div class="col-*">
• .popover-content { white-space: nowrap; }: Nur gut, wenn der Text im Popover kürzer als ist max-width

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

Vielleicht können die neuen CSS- Breitenwerte mit den neuesten Browsern das Problem lösen, ich habe es nicht versucht.

container: 'body'Normalerweise macht er den Trick (siehe JustAnils Antwort oben), aber es gibt ein Problem, wenn sich Ihr Popover in einem Modal befindet. Das z-indexplatziert es hinter dem Modal, wenn das Popover angehängt ist body. Dies scheint mit BS2-Problem 5014 zu tun zu haben , aber ich bekomme es auf 3.1.1. Sie sind nicht ein zu verwenden , bedeutete containerder body, aber wenn Sie zu beheben , den Code zu

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

dann reparierst du das z-index Problem, aber die Popover-Breite ist immer noch falsch.

Die einzige Lösung, die ich finden kann, ist die Verwendung container: 'body'und das Hinzufügen von zusätzlichem CSS:

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

Beachten Sie, dass CSS-Lösungen allein nicht funktionieren.

Sie können das Attribut data-container = "body" im Popover verwenden

<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>

Hier ist die Nicht-Coffeescript-Methode, um dies mit Hover zu tun:

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

Eine getestete Lösung für Bootstrap 4 Beta:

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

Zusammen mit der jQuery-Anweisung:

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

Randnotiz data-container="body"oder container: "body"entweder in HTML oder als optionzu dem popover({})Objekt hat nicht wirklich den Trick gemacht [vielleicht funktioniert das do, aber nur zusammen mit der CSS-Anweisung];

Denken Sie auch daran, dass Bootstrap 4 Beta für die Popover- und Tooltip-Positionierung auf popper.js basiert (zuvor war es tether.js).

Sie können die Breite des Popovers mit den oben angegebenen Methoden anpassen. Am besten definieren Sie jedoch die Breite des Inhalts, bevor Bootstrap sieht und berechnet. Zum Beispiel hatte ich eine Tabelle, ich definierte ihre Breite, dann baute Bootstrap ein Popover, um es anzupassen. (Manchmal hat Bootstrap Probleme, die Breite zu bestimmen, und Sie müssen einspringen und die Hand halten.)

Ich habe das benutzt (funktioniert gut):

.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>

Am Ende setze ich die Breite von div "popover-content" auf die gewünschte Zahl. (andere IDs oder Klassen funktionieren nicht .....) Viel Glück!

  #popover-content{
      width: 600px;

  }

Sie können auch den Datencontainer = "body" hinzufügen, der die Aufgabe übernehmen soll:

<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>

Sie können die Vorlage Ihres Popovers ändern. Entweder mit dem data-template-attribute oder mit dem relevanten Teil in der Funktion, die es einrichtet:

<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>

Für eine Typoskriptkomponente:

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

In Angular können ng-bootstrapSie einfach container="body"zu dem Steuerelement wechseln, das ein Popover auslöst (z. B. Schaltfläche oder Textfeld). Dann müssen Sie in Ihrer globalen Stildatei ( style.cssoder style.scss) Datei hinzufügen .popover { max-width: 100% !important; }. Danach wird der Inhalt des Popovers automatisch auf seine Inhaltsbreite eingestellt.

In Bootstrap 4 können Sie den Standardwert der Bootstrap-Variablen $popover-max-widthin Ihrer Datei styles.scss einfach wie folgt überschreiben:

$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";

Weitere Informationen zum Überschreiben der Bootstrap 4-Standardeinstellungen finden Sie unter https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

In Bootstrap 4 können Sie die Vorlagenoption einfach überprüfen, indem Sie die maximale Breite überschreiben:

$('#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>'
});

Dies ist eine gute Lösung, wenn Sie mehrere Popover auf der Seite haben.

Versuche dies:

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