angularjs - UI Bootstrap Popover: cambiar ancho

angular-ui-bootstrap

Question

Estoy tratando de usar los popovers de UI Bootstrap en AngularJS: http://angular-ui.github.io/bootstrap/#/popover

<i class="fa fa-question-circle" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

Me da un popover como este:

¿Cómo puedo cambiar de estilo el ancho de este popover?

Answer 1

¿ Probó el atributo popover-append-to-body del componente popover?

Answer 2

De los http://angular-ui.github.io/bootstrap/#/popover puede utilizar el

atributo popover-class : clase personalizada que se aplicará a la ventana emergente

<i class="fa fa-question-circle" popover-class="increase-popover-width" popover="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta libero tincidunt, malesuada tellus vitae, dapibus ex. Ut tristique tristique eros." popover-trigger="mouseenter" popover-placement="right"></i>

En tu hoja de estilo

.increase-popover-width {
   max-width: 400px;
}

La razón para configurar max-width lugar del width es que bootstrap tiene popover-max-width establecido como 276px .

código de arranque github

Answer 3

El ancho se puede cambiar fácilmente al anular el .popover :

.popover {
    width: 200px;
}

Answer 4

Otra solución si tiene ventanas emergentes muy amplias es permitirles que se ajusten automáticamente.

Solo configura tu css para que sea así

.popover {
    max-width: 800px; /* optional max width */
    width: intrinsic; /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content; /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
}

Answer 5

Para mí lo siguiente funcionó.

.popover {
    max-width: 450px;
}

Esto realmente cambió el tamaño del contenedor popover blanco.

Answer 6

Puedes lograrlo anulando la clase de contenido emergente:

.popover-content {
width: 200px;
}

ACTUALIZACIÓN: Puede verificar esto en Chrome: - presione F12 - seleccione la lupa - haga clic en el elemento para inspeccionar - modifique su estilo