Cambiar el ancho del popover Bootstrap

192

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/

mayankbatra
fuente

Respuestas:

343

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

Twitter Bootstrap popover aumentar ancho

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/

Añil
fuente
1
+1, pero no funcionará si su popover está en un modo modal: vea mi respuesta a continuación.
EML
2
La respuesta anterior fue TLDR para mí, pero contenía este fragmento genio que resolvió tanto el ancho como el problema de capturar todos los popovers:$('[data-toggle="popover"]').popover({ container: 'body' });
Gregory Cosmo Haun
2
Tenía que agregar!important
Peter Ehrlich,
Puede utilizar el atributo de datos más ordenado: data-container="body"en el elemento
Stephen
@ surfer190 Neater por cada popover, pero desordena si quieres que cada popover tenga container: "body".
Chris Cirefice
39

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.

2 llamado caos
fuente
28
Si no sabe leer y escribir, aquí está la misma última línea que el js regular:.on("show.bs.popover", function(){ $(this).data("bs.popover").tip().css("max-width", "600px"); });
Colin el
1
¿Qué es .tip ()? ¿Por qué usar .data ()? XD Realmente no entiendo esto, ¡pero funciona! Me gusta más esta solución que escribir un nuevo CSS para reemplazar el predeterminado max-width. ¡Gracias por esta solución! Por cierto en lugar de "600px", lo configuré "none". Es mejor para mí.
Taufik Nur Rahmanda
36

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>
Aleksey Shafransky
fuente
1
Es posible que deba agregar! Important para anular la configuración predeterminada de bootstrap.
John Creamer
29

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/

BENARD Patrick
fuente
2
En primer lugar, eso cambiaría el ancho de popover en todo el sitio. Pero encontré una respuesta. Más correctamente una solución alternativa, publicando ahora.
mayankbatra
@Peter, no puedo reproducir tu problema, creo que olvidaste agregar la colocación de datos a tu entrada ...
BENARD Patrick
@pbenard Tengo el mismo problema, su solución funciona para reducir el ancho máximo de 276px. Pero si intenta cambiar el ancho máximo más que eso, no cambiará.
Hardik Patel
18

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>'
})
tyczo
fuente
1
no funcionó para mí. También se me exigió agregar max-width: 500pxestilo.
cronfy
7

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");
});
Dirceu
fuente
Esto ha funcionado para mí, sin embargo, solo cuando la configuración widthnomax-width
Deano
6
<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.

mayankbatra
fuente
no funciono para mi
Esperaba
6

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

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

tanguy_k
fuente
4

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.

EML
fuente
1
+1 en que sea molesto cuando el popover aparece detrás del modal. Me encontré con este mismo problema con la directiva de arranque angular-ui usando una información sobre herramientas tooltip-append-to-body, apareció detrás del fondo modal y el fondo modal 'en gris'.
Daryn
4

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>
Nayan Hodar
fuente
4

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

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)

vzR
fuente
2

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)

CloudMagick
fuente
2

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;
}
Bimal Das
fuente
2
 <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;

  }
CincyBella
fuente
1

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>
treize
fuente
wow ... responde la pregunta original también. Limpia y no anula el bootstrap.
Johnathan Elmore
¿Cómo cambia eso el ancho del popover?
Hacia el
1

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>

FalcoGer
fuente
0

Para un componente mecanografiado:

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

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.

Ramin Ar
fuente
0

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

Aleksei Protopopov
fuente
0

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.

Vincent Decaux
fuente
-2

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));
Phani CR
fuente
Esto no funcionará debido a la última línea. Analizar un entero como valor para el ancho hará que CSS se rompa. En su lugar, debe intentarlo: $('.popover').css('width', popover_size + 'px');dado que popover_size se analiza como entero. Otra cosa es eso: popover_size = ((parseInt(string[0])+350));agregará ancho adicional.
Todor Todorov