¿como adapto el tamaño del popover de bootstrap al tamaño del contenido?
dentro de ese link hay un popover adaptado al width 100%, mi pregunta es, si es posible que ese mismo popover se muestre al centro de la pantalla siempre
¿como adapto el tamaño del popover de bootstrap al tamaño del contenido?
dentro de ese link hay un popover adaptado al width 100%, mi pregunta es, si es posible que ese mismo popover se muestre al centro de la pantalla siempre
En realidad es muy fácil (si entendí bien lo que pretendes), pero te aclaro, que probablemente me gane unos puntos negativos en esta pregunta por responderte, siendo que las has formulado de manera incorrecta, ya que no proporcionas al menos como tienes tu estructura html, si has intentado hacerlo o un ejemplo en imagen de lo que quieres lograr.
Al grano, solo necesitas usar position: fixed
en el contenedor del pop up y posicionarlo al centro dinámicamente, así:
.popup{
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
}
Aquí un ejemplo con 2 estructuras html, una con el contenido popup dentro del popover y otra estando en la misma posición jerárquica:
*{box-sizing: border-box; margin: 0; padding: 0;
font-family: arial;}
.pop-over{
display: inline-block;
padding: 0.5em;
background: whitesmoke;
cursor: pointer;
border-radius: 0.3em;
}
.popup{
padding: 0.5em 1em;
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, 0);
display: inline-block;
z-index: 10;
background: white;
box-shadow: 0 0 1em 0 rgba(0,0,0,.2);
border-radius: 0.3em;
pointer-events: none;
opacity: 0;
transition: all ease .3s;
}
.pop-over:hover .popup,
.pop-over:hover + .popup{
transform: translate(-50%, -50%);
opacity: 1;
}
<label class="pop-over">
Texto 01
<div class="popup">
Contenido
</div>
</label>
<label class="pop-over">
Texto 02
</label>
<div class="popup">
Contenido
</div>
Ahora, que funcione o no, depende de varias cosas, tu estructura html, el css que tienes que sobreescribir, si estas queriendo una solución más con javascript o si se ha entendido bien tu problema. Cualquier cosa dejame tu comentario. Éxitos!