source - morris graph jquery

jQuery Sparklines y Twitter Bootstrap 3-reemplaza el estilo de información sobre herramientas?

Question

Aquí va: estoy tratando de usar jQuery Sparklines con Twitter Bootstrap 3. En el proceso, la información sobre herramientas de Sparklines suelta el estilo, y es claro que el bootstrap css está anulando algo en el Sparklines JS.

Hasta donde puedo llegar, tiene que ver con el selector de tooltip .

Aquí hay un ejemplo de cómo debería verse. Esto es sin el Bootstrap css. Apunte a las diferentes líneas de chispa y vea una bonita información sobre herramientas con valores flotando: JSfiddle, cómo debería verse

Aquí, desafortunadamente, es lo que sucede cuando agrego Bootstrap css: JSfiddle, cómo se ve con Bootstrap css.

Estoy seguro de que es bastante simple, pero como el CSS por defecto para Sparklines está codificado en el js, estoy en el mar.

Cualquier puntero sería muy apreciado.

Answer 1

¡Bien! Parece que lo he resuelto. No es perfecto, pero es lo suficientemente bueno por ahora: para una referencia adicional para otros: En el Sparkline js: agregado a la línea 354:

''padding: 5px 5px 15px 5px;'' +
''min-height: 30px;'' +
''min-width: 30px;'' +

.y cambió la línea 871 de:

this.width = this.sizetip.width() + 1;

a:

this.width = this.sizetip.width() + 12;

No es perfecto, pero funciona.

Answer 2

Descubrí que esto funciona mejor para hacer que cambie el tamaño según el contenido.

.jqstooltip {
width: auto !important;
height: auto !important;
}

Answer 3

Descubrí que lo siguiente funciona mejor para contrarrestar el bootstrap css

.jqstooltip {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

Answer 4

Tuve el mismo problema, puedes usar este CSS

 .jqstooltip{
width:50px;
height:25px!important;
}

Answer 5

.jqstooltip {
width: auto !important;
height: auto !important;
}