Estoy diseñando una página usando Bootstrap 3. Estoy tratando de usar un popover con placement: rightun elemento de entrada. El nuevo Bootstrap garantiza que, si lo usa form-control, básicamente tenga un elemento de entrada de ancho completo.

El código HTML se parece a esto:

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

El ancho de popovers es demasiado bajo, en mi opinión porque no queda ningún ancho en el div. Quiero el formulario de entrada en el lado izquierdo y un amplio popover en el lado derecho.

Principalmente, estoy buscando una solución donde no tenga que anular Bootstrap.

El JsFiddle adjunto. La segunda opción de entrada. No he usado mucho jsfiddle, así que no lo sé, pero intente aumentar el tamaño del cuadro de salida para ver resultados, en pantallas más pequeñas ni siquiera lo vería. http://jsfiddle.net/Rqx8T/

Aumente el ancho con CSS

Puede usar CSS para aumentar el ancho de su popover, así:

/* 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 esto no funciona, probablemente desee la solución a continuación y modifique su containerelemento. ( Ver el JSFiddle )

Contenedor de arranque de Twitter

Si eso no funciona, probablemente necesite especificar el contenedor:

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

Más información

El popover está contenido dentro del elemento en el que se activa. Para extenderlo "ancho completo" - especifique el contenedor:

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

JSFiddle

Vea el JSFiddle para probarlo.

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

También necesitaba un popover más amplio para un campo de texto de búsqueda. Se me ocurrió esta solución Javascript (aquí en 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 solución está en la última línea. Antes de que se muestre el popover, la opción de ancho máximo se establece en un valor personalizado. También puede agregar una clase personalizada al elemento tip.

Yo tuve el mismo problema. Pasé bastante tiempo buscando una respuesta y encontré mi propia solución: agregue el siguiente texto a la cabeza:

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

Para cambiar el ancho puedes usar css

Para tamaño fijo deseado

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

Para ancho máximo deseado:

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

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

Para cambiar el ancho del popover, puede anular la plantilla:

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

Para las personas que prefieren la solución de JavaScript. En Bootstrap 4 tip () se convirtió en getTipElement () y devuelve un objeto no jQuery. Entonces, para cambiar el ancho del popover en Bootstrap 4, puede usar:

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

Básicamente puse el código de popover en la fila div, en lugar de la entrada div. Resuelve el problema.

Con la ayuda de lo que @EML ha descrito anteriormente con respecto a popover en ventanas modales y también el código mostrado por @ 2called-chaos, así es como resolví el problema.

Tengo un icono en el modal que, cuando se hace clic, debería aparecer la ventana emergente

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

Mi guión

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

No hay una solución final aquí: / Solo algunas ideas sobre cómo resolver este problema "limpiamente" ...

Versión actualizada (jQuery 1.11 + Bootstrap 3.1.1 + class = "col-xs-" en lugar de class = "col-md-") de su JSFiddle original: http://jsfiddle.net/tkrotoff/N99h7/

Ahora el mismo JSFiddle con su solución propuesta : http://jsfiddle.net/tkrotoff/N99h7/8/
No funciona: el popover está posicionado en relación con el <div class="col-*">+ imagínese que tiene múltiples entradas para el mismo <div class="col-*">...

Entonces, si queremos mantener el popover en las entradas (semánticamente mejor):

• .popover { position: fixed; }: pero cada vez que desplaza la página, el elemento emergente no seguirá el desplazamiento
• .popover { width: 100%; }: no es tan bueno ya que aún depende del ancho principal (es decir, <div class="col-*">
• .popover-content { white-space: nowrap; }: bueno solo si el texto dentro del popover es más corto que max-width

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

Tal vez, usando navegadores muy recientes, los nuevos valores de ancho de CSS pueden resolver el problema, no lo intenté.

container: 'body'normalmente hace el truco (vea la respuesta de JustAnil arriba), pero hay un problema si su popover está en modo modal. Lo z-indexcoloca detrás del modal cuando está unido el popover body. Esto parece estar relacionado con el problema BS2 5014 , pero lo obtengo en 3.1.1. No debes usar un containerde body, pero si arreglas el código para

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

entonces arreglas el z-indexproblema, pero el ancho del popover sigue siendo incorrecto.

La única solución que puedo encontrar es usar container: 'body'y agregar algunos css adicionales:

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

Tenga en cuenta que las soluciones CSS por sí mismas no funcionarán.

Puede usar el atributo data-container = "body" dentro de 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>

Aquí está la forma no coffeescript de hacerlo con el cursor:

$(".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 solución probada para Bootstrap 4 beta:

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

Junto con la declaración jQuery:

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

Nota lateral, data-container="body"o container: "body"en HTML o como optionel popover({})objeto realmente no hacer el truco [tal vez el hacer el trabajo, pero sólo junto con la declaración CSS];

Además, recuerde que Bootstrap 4 beta se basa en popper.js para su posicionamiento popover y tooltip (antes de eso era tether.js)

Puede ajustar el ancho del popover con los métodos indicados anteriormente, pero lo mejor que puede hacer es definir el ancho del contenido antes de que Bootstrap vea y haga sus cálculos. Por ejemplo, tenía una tabla, definí su ancho, luego bootstrap construyó un popover para adaptarse a ella. (A veces Bootstrap tiene problemas para determinar el ancho, y debes intervenir y sostener su mano)

Usé esto (trabajando 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>

Termino estableciendo el ancho div "popover-content" en el número que quiero. (otros identificadores o clase no funcionarán .....) ¡Buena suerte!

  #popover-content{
      width: 600px;

  }

También puede agregar el contenedor de datos = "cuerpo" que debe hacer el trabajo:

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

Puede cambiar la plantilla de su popover. Ya sea con el data-templateatributo o con la parte relevante en la función que lo configura:

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

Para un componente mecanografiado:

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

En Angular ng-bootstrappuede simplemente container="body"controlar que se activa el popover (como un botón o un cuadro de texto). Luego, en su archivo de estilo global ( style.csso style.scss) archivo debe agregar .popover { max-width: 100% !important; }. Después de eso, el contenido del popover se establecerá automáticamente en su ancho de contenido.

En bootstrap 4, simplemente puede anular el valor predeterminado de la variable bootstrap $popover-max-widthen su archivo styles.scss de la siguiente manera:

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

Más información sobre cómo anular los valores predeterminados de bootstrap 4 https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

En Bootstrap 4, puede revisar fácilmente la opción de plantilla, anulando el ancho máximo:

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

Esta es una buena solución si tiene varios popovers en la página.

Prueba esto:

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