Entiendo que puedo ir al http://twitter.github.com/bootstrap/customize.html#components y seleccionar los únicos componentes que necesito para que los popovers funcionen.¿Qué se necesita SOLO para Twitter Bootstrap's Popover?
He actualizado js
y css
para enlazar a los archivos descargados. No estoy recibiendo ningún error, pero tampoco estoy recibiendo el popover.
pregunta original:
me gustaría añadir el popover a mi sitio, pero estándar conflictos de archivos CSS de la rutina de carga con mi estilo existente. Desde http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css, ¿alguien me puede decir qué partes y piezas necesito solo para los popovers? Usé Firebug para ver qué clases se llaman pero obviamente me falta algo. No tengo que usar Boostrap's Popover, estoy abierto a otros complementos si son tan fáciles de usar.
CSS
/* CSS Document */
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px;
}
.popover.top {
margin-top: -5px;
}
.popover.right {
margin-left: 5px;
}
.popover.bottom {
margin-top: 5px;
}
.popover.left {
margin-left: -5px;
}
.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
}
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.popover .arrow {
position: absolute;
width: 0;
height: 0;
}
.popover-inner {
padding: 3px;
width: 280px;
overflow: hidden;
background: #000000;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover-title {
padding: 9px 15px;
line-height: 1;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.popover-content {
padding: 14px;
background-color: #ffffff;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.popover-content p, .popover-content ul, .popover-content ol {
margin-bottom: 0;
}
.fade {
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-ms-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
opacity: 0;
}
.fade.in {
opacity: 1;
}
h3 {
/* line-height: 27px; */
font-size: 18px;
}
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 18px;
margin: 0 0 9px;
}
El CSS anterior es lo que determiné que necesitaba si eso no estaba claro. – HPWD
Así que haga que sus estilos sean más específicos, lo que siempre es una buena idea de todos modos, y anularán. – Blazemonger
Solo mira el [código fuente] (https://raw.github.com/twitter/bootstrap/master/less/popovers.less). Tendría que escribir su propia función '.border-radius()' y agregar las variables apropiadas. – Blender