Sto progettando una pagina usando Bootstrap 3. Sto cercando di usare un popover con placement: rightsu un elemento di input. Il nuovo Bootstrap assicura che se lo usi form-control, in pratica hai un elemento di input a larghezza intera.

Il codice HTML è simile al seguente:

<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 larghezza dei popovers è troppo bassa, secondo me perché non è rimasta alcuna larghezza nel div. Voglio il modulo di input sul lato sinistro e un ampio popover sul lato destro.

Principalmente, sto cercando una soluzione in cui non devo scavalcare Bootstrap.

Il JsFiddle allegato. La seconda opzione di input. Non ho usato molto jsfiddle quindi non lo so, ma prova ad aumentare le dimensioni della casella di output per vedere i risultati, su schermi più piccoli non lo vedrebbero nemmeno. http://jsfiddle.net/Rqx8T/

Aumenta la larghezza con CSS

Puoi usare i CSS per aumentare la larghezza del tuo popover, in questo modo:

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

Se questo non funziona, probabilmente desideri la soluzione seguente e modifica il tuo containerelemento. ( Visualizza il JSFiddle )

Contenitore bootstrap di Twitter

Se non funziona, probabilmente devi specificare il contenitore:

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

Ulteriori informazioni

Il popover è contenuto all'interno dell'elemento in cui è attivato. Per estenderlo "a larghezza intera", specificare il contenitore:

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

JSFiddle

Visualizza il JSFiddle per provarlo.

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

Avevo anche bisogno di un popover più ampio per un campo di testo di ricerca. Mi è venuta in mente questa soluzione Javascript (qui 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"))

La soluzione è nell'ultima riga. Prima che venga visualizzato il popover, l'opzione di larghezza massima è impostata su un valore personalizzato. È inoltre possibile aggiungere una classe personalizzata all'elemento tip.

Ho avuto lo stesso problema. Ho trascorso parecchio tempo a cercare una risposta e ho trovato la mia soluzione: aggiungi il seguente testo alla testa:

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

Per cambiare larghezza puoi usare css

Per dimensioni fisse ricercate

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

Per la larghezza massima desiderata:

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

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

Per modificare la larghezza del popover è possibile ignorare il modello:

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

Per le persone che preferiscono la soluzione JavaScript. In Bootstrap 4 tip () è diventato getTipElement () e restituisce un oggetto no jQuery. Quindi, per modificare la larghezza del popover in Bootstrap 4 puoi usare:

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

Fondamentalmente ho inserito il codice popover nella riga div, anziché nell'input div. Problema risolto.

Con l'aiuto di ciò che @EML ha descritto sopra riguardo a popover su finestre modali e anche il codice mostrato da @ 2called-caos, ecco come ho risolto il problema.

Ho un'icona sul modale che quando viene cliccato dovrebbe apparire il popup

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

La mia sceneggiatura

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

Nessuna soluzione finale qui: / Solo alcuni pensieri su come risolvere "in modo pulito" questo problema ...

Versione aggiornata (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" invece di class = "col-md-") dell'originale JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/

Ora lo stesso JSFiddle con la soluzione proposta : http://jsfiddle.net/tkrotoff/N99h7/8/
Non funziona: il popover è posizionato rispetto al <div class="col-*">+ immagina di avere più input per lo stesso <div class="col-*">...

Quindi, se vogliamo mantenere il popover sugli input (semanticamente migliore):

• .popover { position: fixed; }: ma ogni volta che si scorre la pagina, il popover non seguirà lo scorrimento
• .popover { width: 100%; }: non va bene dato che dipende ancora dalla larghezza del genitore (es <div class="col-*">
• .popover-content { white-space: nowrap; }: buono solo se il testo all'interno del popover è più corto di max-width

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

Forse, utilizzando browser molto recenti, i nuovi valori di larghezza CSS possono risolvere il problema, non ho provato.

container: 'body'normalmente fa il trucco (vedi la risposta di JustAnil sopra), ma c'è un problema se il tuo popover è in modale. Lo z-indexcolloca dietro il modale quando il popover è attaccato body. Questo sembra essere correlato al numero 5014 di BS2 , ma lo sto ottenendo su 3.1.1. Non devi usare un containerdi body, ma se aggiusti il ​​codice su

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

quindi z-indexrisolvi il problema, ma la larghezza del popover è ancora errata.

L'unica correzione che riesco a trovare è quella di utilizzare container: 'body'e aggiungere alcuni extra CSS:

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

Si noti che le soluzioni CSS da sole non funzioneranno.

È possibile utilizzare l'attributo data-container = "body" in 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>

Ecco il modo senza caffè per farlo con 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"
    });
  });
});

Una soluzione testata per Bootstrap 4 beta:

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

Insieme alla dichiarazione jQuery:

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

Side-note, data-container="body"o container: "body"in formato HTML o come optionper l' popover({})oggetto non ha davvero fare il trucco [forse il fare il lavoro, ma solo insieme con la dichiarazione CSS];

Inoltre, ricorda che Bootstrap 4 beta si affida a popper.js per il suo posizionamento popover e tooltip (prima era tether.js)

Puoi regolare la larghezza del popover con i metodi sopra indicati, ma la cosa migliore da fare è definire la larghezza del contenuto prima che Bootstrap veda e fa i suoi calcoli. Ad esempio, avevo un tavolo, ho definito la sua larghezza, quindi bootstrap ha creato un popover per adattarlo. (A volte Bootstrap ha difficoltà a determinare la larghezza e devi intervenire e tenerlo per mano)

Ho usato questo (funzionando bene):

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

Finisco impostando div "popover-content" sul numero desiderato. (altri ID o classe non funzioneranno .....) Buona fortuna!

  #popover-content{
      width: 600px;

  }

puoi anche aggiungere il data-container = "body" che dovrebbe fare il lavoro:

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

Puoi cambiare il modello del tuo popover. O con l' data-templateattributo o con la parte rilevante nella funzione che lo imposta:

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

Per un componente dattiloscritto:

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

In Angular ng-bootstrappuoi semplicemente container="body"controllare che attiva il popover (come pulsante o casella di testo). Quindi nel tuo file di stile globale ( style.csso style.scss) file devi aggiungere .popover { max-width: 100% !important; }. Successivamente, il contenuto del popover verrà automaticamente impostato sulla larghezza del contenuto.

In bootstrap 4 puoi semplicemente sovrascrivere il valore predefinito della variabile bootstrap $popover-max-widthnel tuo file styles.scss in questo modo:

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

Altre informazioni sulla sostituzione delle impostazioni predefinite di bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

Su Bootstrap 4, puoi facilmente rivedere l'opzione del modello, sovrascrivendo la larghezza massima:

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

Questa è una buona soluzione se hai diversi popover sulla pagina.

Prova questo:

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