twitter-bootstrap 如何更改 Bootstrap 工具提示的字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37369052/
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
How to change the font of Bootstrap tooltips
提问by LegendaryB3ast
Using the Tooltip plugin that is incorporated in bootstrap.js, how can I change the font that the text inside the tooltip is written in? No matter how hard I tried, the only success I've had was changing the text defined in my * selector. My bootstrap is activated with jQuery using this: $(".myTooltip").tooltip({html: "true", placement: "auto-right", delay: {"show": 300, "hide": 100}});
The tooltip is being shown next to this image:<img title="<ul class='text-left'><li>Some text</li><li><em>More Text</em></li><li>Cost</li></ul>" class="myTooltip" src="image.png" />
使用包含在 bootstrap.js 中的 Tooltip 插件，如何更改工具提示内文本的字体？无论我多么努力，我唯一的成功就是更改了 * 选择器中定义的文本。我的引导程序是使用 jQuery 激活的：$(".myTooltip").tooltip({html: "true", placement: "auto-right", delay: {"show": 300, "hide": 100}});
工具提示显示在此图像旁边：<img title="<ul class='text-left'><li>Some text</li><li><em>More Text</em></li><li>Cost</li></ul>" class="myTooltip" src="image.png" />
回答by Gleb Kemarsky
Bootstrap decorates tooltips via two classes - .tooltipof .tooltip-inner. Here's a fragment from bootstrap.css:
引导通过两个类装饰栏-.tooltip的.tooltip-inner。这是来自的片段bootstrap.css：
.tooltip {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
/* ... */
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 4px;
}
So you can setup tooltips by yourself:
所以你可以自己设置工具提示：
jQuery(document).ready(function($) {
$(".my-tooltip").tooltip({
html: "true",
placement: "auto-right",
delay: {"show": 300, "hide": 100}
});
});@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body {
padding: 20px;
}
.tooltip {
font-family: Georgia;
font-size: 20px;
}
.tooltip .tooltip-inner {
background-color: #ffc;
color: #c00;
min-width: 250px;
}<img title="<ul class='text-left'><li>Some text</li><li><em>More Text</em></li><li>Cost</li></ul>" class="my-tooltip" src="https://i.stack.imgur.com/ssdlq.jpg" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>