Here is how I did it on one site (I should mention that it uses Bootstrap 3, but this should not make too much difference):
Stylesheet:
/* Tooltip */
tooltip-arrow, .mt-tooltip + .tooltip > .tooltip-inner
{
background-color: #ffff8d;
color: #000;
font-size: 16px;
min-width: 150px;
max-width: 400px;
z-index: 9999;
text-align: left;
line-height: 24px;
border-radius: 3px;
box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.27);
max-width: 100%;
white-space: nowrap;
font-family: Arial, Helvetica, Sans-Serif;
}
.tooltip.in
{
opacity:1;
filter:alpha(opacity=100);
}
a.mt-tooltip
{
border-bottom: 1px dotted #333333;
color: #333333;
text-decoration: none;
}
Jquery:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip({
html: true
});
});
HTML:
<p>
Lorem ipsum dolor sit amet, consetetur
<a href="#" class="mt-tooltip" data-toggle="tooltip" title="At vero eos et accusam et justo duo dolores et ea rebum.">sadipscing</a>
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
When using HTML in the tooltip, you have to HTML-encode encode it in the title, like
title="<strong>Bold text</strong>"
Worked fine for me. You can find an example here: [https://ls.innsbruck.gv.at/leben/soziales/mindestsicherung] - look for words with dotted underlines.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…