twitter-bootstrap jQuery Sparklines 和 Twitter Bootstrap 3 - 工具提示样式覆盖？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18894820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Sparklines and Twitter Bootstrap 3 - tooltip style overrides?
提问by benteh
Here it goes: I am trying to use jQuery Sparklines with Twitter Bootstrap 3. In the process, the tooltip of Sparklines loose styling, and it is clearly that the Bootstrap css is overriding something in the Sparklines JS.
它是这样的：我正在尝试将 jQuery Sparklines 与 Twitter Bootstrap 3 一起使用。在此过程中，Sparklines 的工具提示样式松散，很明显 Bootstrap css 覆盖了 Sparklines JS 中的某些内容。
As far as I can make out, it has to do with the tooltipselector.
据我所知，它与tooltip选择器有关。
Here is one example of how it shouldlook. This is withoutthe Bootstrap css. Point at the different sparklines, and see a pretty tooltip with values hovering: JSfiddle, how it should look
这是它应该如何显示的一个示例。这是没有Bootstrap css 的。指向不同的迷你图，会看到一个漂亮的工具提示，上面有值悬停： JSfiddle，它应该是什么样子
Here, unfortunately, is what happens when I add the Bootstrap css: JSfiddle, how it looks with Bootstrap css.
不幸的是，这里是我添加 Bootstrap css 时发生的情况： JSfiddle，它与 Bootstrap css 的外观。
I am sure it is pretty simple, but as the default css for Sparklines is hard-coded into the js, I am out at sea.
我确信它非常简单，但由于 Sparklines 的默认 css 被硬编码到 js 中，我在海上。
Any pointers would be greatly appreciated.
任何指针将不胜感激。
回答by miboper
I found that the following works better to counter bootstrap css
我发现以下更有效地对抗 bootstrap css
.jqstooltip {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
回答by lonerockz
I found that this works best to get it to resize based on content.
我发现这最适合让它根据内容调整大小。
.jqstooltip {
width: auto !important;
height: auto !important;
}回答by benteh
Well! I seem to have solved it. Not perfect, but good enough for now: for further reference for others: In the Sparkline js: added to line 354:
好！我好像已经解决了。不完美，但现在足够好：供其他人进一步参考：在 Sparkline js 中：添加到第 354 行：
'padding: 5px 5px 15px 5px;' +
'min-height: 30px;' +
'min-width: 30px;' +
.and changed line 871 from:
. 并将第 871 行从：
this.width = this.sizetip.width() + 1;
to:
到：
this.width = this.sizetip.width() + 12;
Not perfect, but it works.
不完美，但它有效。
回答by Nicola Mihaita
I had same issue, you can use this css
我有同样的问题，你可以使用这个 css
.jqstooltip{
width:50px;
height:25px!important;
}
回答by Nicola Mihaita
.jqstooltip {
width: auto !important;
height: auto !important;
}
