Aumentar el ancho con CSS

Puedes usar CSS para aumentar el ancho de tu 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, es probable que desee la solución a continuación y alterar su elemento container. (Ver el JSFiddle )

Twitter bootstrap Container

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 que se activa en. 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 una ventana emergente más amplia para un campo de texto de búsqueda. Se me ocurrió esta solución Javascript (aquí en Café):

$(".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 la ventana emergente, la opción max-width se establece en un valor personalizado. También puede agregar una clase personalizada al elemento tip.

Yo tenía el mismo problema. Pasé bastante tiempo buscando una respuesta y encontré mi propia solución: Agregar 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 anchura máxima deseada:

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

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

Para cambiar el ancho de la ventana emergente 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>'
})

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 en 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 algunos pensamientos sobre cómo resolver "limpiamente" este problema...

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: la ventana emergente se coloca en relación con <div class="col-*"> + imagine que tiene múltiples entradas para el mismo <div class="col-*">...

Así que si queremos mantener el popover en las entradas (semánticamente mejor):

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

Véase http://jsfiddle.net/tkrotoff/N99h7/11 /

Tal vez, usando muy reciente navegadores, el nuevos valores de ancho CSS puede resolver el problema, no lo intenté.

container: 'body' normalmente hace el truco (ver la respuesta de JustAnil arriba), pero hay un problema si tu popover está en un modal. El z-indexlo coloca detrás de el modal cuando el popover está unido a body. Esto parece estar relacionado con BS2 issue 5014, pero lo estoy consiguiendo en 3.1.1. Usted no está destinado a utilizar un container de body, pero si se fija el código a

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

Luego soluciona el problema z-index, pero el ancho de la ventana emergente sigue siendo incorrecto.

La única solución que puedo encontrar es usar container: 'body' y para añadir algo de css extra:

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

Tenga en cuenta que las soluciones css por sí solas 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>

Puede ajustar el ancho de la ventana emergente 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 adaptarlo. (A veces Bootstrap tiene problemas para determinar el ancho, y necesita intervenir y sostener su mano)

Aquí está la forma no coffeescript de hacerlo 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"
    });
  });
});

También puede agregar el data-container = "body" que debería 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>

Usé esto (funciona bien):

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

Para las personas que prefieren la solución JavaScript. En Bootstrap 4 tip() se convirtió en getTipElement() y devuelve un objeto sin jQuery. Así que para cambiar el ancho del popover en Bootstrap 4 puedes usar:

}).on("show.bs.popover", function() {
    $($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});

 <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 configurando el ancho div "popover-content" al número que quiero. (otros ID o la clase no funcionará.....) ¡Buena suerte!

  #popover-content{
      width: 600px;

  }

Una solución probada para Bootstrap 4 beta:

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

Junto con la instrucció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 un option al objeto popover({}) realmente no hizo el truco [tal vez el trabajo do, pero solo junto con la instrucción CSS];

También, recuerde que Bootstrap 4 beta se basa en popper.js por su posicionamiento popover y tooltip (antes de eso era tether.js)

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