[英]How to change the font of Bootstrap tooltips
使用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" />
Bootstrap通过两个类来装饰工具提示 - .tooltip
of .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;
}
因此,您可以自己设置工具提示:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.