javascript - ejemplo - tooltip bootstrap css
bootstrap popover: posicionamiento avanzado (9)
Estoy tratando de colocar una ventana emergente de inicio de Twitter para un disparador que se encuentra en el extremo superior derecho de una página web de 960px. Lo ideal sería colocarlo en la parte inferior y mover la flecha con CSS (de modo que la flecha esté en la parte superior derecha de la ventana emergente).
Desafortunadamente, la posición ''colocación'': ''inferior'' no es suficiente, ya que la centrará debajo del gatillo.
Estoy buscando una solución que coloque el popover estáticamente debajo y a la izquierda del disparador. Leí toneladas de preguntas pero no pude encontrar ninguna.
¿Consejos?
Una solución simple
Simplemente agrega un atributo a tu amigo de popover!
Violín
Mira mi violín si tienes prisa.
Objetivo principal
Queremos agregar un ID o una clase a una ventana emergente en particular para que podamos personalizarlo de la manera que queremos a través de CSS.
Tenga en cuenta que no queremos personalizar todos los popovers! Esta es una idea terrible (básicamente, a partir de hoy, la respuesta aceptada es una idea TERRIBLE ...)
Ejemplo
Aquí hay un ejemplo simple: muestre la ventana emergente de esta manera:
html:
<button id="my-button" data-toggle="popover">My Button</button>
js
// We add the id ''my-popover''
$("#my-button").popover({
html : true,
placement: ''bottom''
}).data(''bs.popover'').tip().attr(''id'', ''my-popover'');
css:
#my-popover {
left: -169px!important;
}
#my-popover .arrow {
left: 90%
}
Ventana de popover
La mejor solución que funcionará para usted en todas las ocasiones, especialmente si su sitio web tiene un ancho fluido, es utilizar la opción de ventana gráfica de la ventana emergente Bootstrap.
Esto hará que la ventana emergente tome ancho dentro de un selector que haya asignado. Entonces, si el botón de activación está a la derecha de ese contenedor, la flecha de inicio también aparecerá a la derecha mientras la ventana emergente está dentro de esa área. Ver jsfiddle.net
También puede usar el relleno si desea algo de espacio desde el borde del contenedor. Si no desea relleno, solo use la ventana gráfica: ''.container''
$(''#popoverButton'').popover({
container: ''body'',
placement: "bottom",
html: true,
viewport: { selector: ''.container'', padding: 5 },
content: ''<strong>Hello Wooooooooooooooooooooooorld</strong>''
});
en el siguiente ejemplo html:
<div class="container">
<button type="button" id="popoverButton">Click Me!</button>
</div>
y con CSS:
.container {
text-align:right;
width: 100px;
padding: 20px;
background: blue;
}
Esto funciona. Probado
.popover {
top: 71px !important;
left: 379px !important;
}
He creado un complemento de jQuery que proporciona 4 ubicaciones adicionales: topLeft, topRight, bottomLeft, bottomRight
Solo incluye el js minificado o js sin minitar y tienes el css correspondiente (minified vs unminified) en la misma carpeta.
https://github.com/dkleehammer/bootstrap-popover-extra-placements
Para bootstrap 3.0.0:
.popover{ right:0!important; }
Y modificar tambien
.popover { max-width:WWWpx!important; }
donde WWW es su ancho máximo correcto para mostrar el contenido de su ventana emergente.
Quizás no necesite esta lógica para un comportamiento receptivo.
P.ej
placement: ''auto left''
Bootstrap 3 tiene valor automático para la colocación . Doc. Bootstrap :
Cuando se especifica "auto", reorientará dinámicamente la información sobre herramientas. Por ejemplo, si la ubicación es "izquierda automática", la información sobre herramientas se mostrará a la izquierda cuando sea posible, de lo contrario se mostrará a la derecha.
Resolví esto (parcialmente) agregando algunas líneas de código a la biblioteca css bootstrap. Tendrá que modificar tooltip.js, tooltip.less, popover.js y popover.less
en tooltip.js, agregue este caso en la instrucción switch allí
case ''bottom-right'':
tp = {top: pos.top + pos.height, left: pos.left + pos.width}
break
en tooltip.less, agregue estas dos líneas en .tooltip {}
&.bottom-right { margin-top: -2px; }
&.bottom-right .tooltip-arrow { #popoverArrow > .bottom(); }
haga lo mismo en popover.js y popover.less. Básicamente, donde sea que encuentre un código donde se mencionan otras posiciones, agregue la posición deseada en consecuencia.
Como mencioné anteriormente, esto solucionó el problema parcialmente. Mi problema ahora es que la pequeña flecha de la ventana emergente no aparece.
nota: si desea tener el popover en la parte superior izquierda, use el atributo superior de ''.top'' y el atributo izquierdo de ''.left''
Si observa los códigos fuente de bootstrap , notará que la posición puede modificarse utilizando el margen.
Entonces, primero debes cambiar la plantilla de ventana emergente para agregar tu propia clase css para no entrar en conflicto con otras ventanas emergentes:
$(".trigger").popover({
html: true,
placement: ''bottom'',
trigger: ''click'',
template: ''<div class="popover popover--topright" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>''
});
Luego, usando css puedes cambiar fácilmente la posición de popover:
.popover.popover--topright {
/* margin-top: 0px; // Use to change vertical position */
margin-right: 40px; /* Use to change horizontal position */
}
.popover.popover--topright .arrow {
left: 88% !important; /* fix arrow position */
}
Esta solución no influiría en otros popovers que tengas. La misma solución se puede usar en información sobre herramientas también porque la clase emergente se hereda de la clase de información sobre herramientas.
Tuve que hacer los siguientes cambios para que la ventana emergente se posicione a continuación con alguna superposición y muestre la flecha correctamente.
js
case ''bottom-right'':
tp = {top: pos.top + pos.height + 10, left: pos.left + pos.width - 40}
break
css
.popover.bottom-right .arrow {
left: 20px; /* MODIFIED */
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.popover.bottom-right .arrow:after {
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
Esto se puede extender para ubicaciones de flecha en otros lugares ... ¡disfruta!