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 decorates tooltips via two classes - .tooltip
of .tooltip-inner
. Here's a fragment from 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With