<p>Dieser Text enthält ein <a href="#" data-toggle="tooltip" title="Die Erklärung zum diesem Wort wird standardmäßig darüber eingeblendet.">Wort</a>,
das beim Überfahren mit der Maus näher erklärt wird.</p>
<p>Dieser Text enthält ein <a href="#" data-toggle="tooltip" data-placement="right" title="Es funktioniert aber rechts.">Wort</a>,
das beim Überfahren mit der Maus näher erklärt wird.</p>
<p>Dieser Text enthält ein <a href="#" data-toggle="tooltip" data-placement="left" title="Oder links.">Wort</a>,
das beim Überfahren mit der Maus näher erklärt wird.</p>
<p>Dieser Text enthält ein <a href="#" data-toggle="tooltip" data-placement="bottom" title="Oder darunter.">Wort</a>,
das beim Überfahren mit der Maus näher erklärt wird.</p>
<hr>
<ol>
<li>
<a href="#"
data-toggle="tooltip"
data-template='<div class="tooltip my-tooltip" role="tooltip"><div class="tooltip-arrow"></div>Tooltip: <div class="tooltip-inner"></div></div>'
title="Inhalt des Tooltips">Tooltip mit eigener CSS-Klasse (.my-tootltip)</a>
</li>
<li>
<a href="#"
data-toggle="tooltip"
data-trigger="click"
data-placement="bottom"
title="Inhalt des Tooltips">Tooltip nach Klick</a>
</li>
<li>
<a href="#"
data-toggle="tooltip"
data-animation="false"
title="Inhalt des Tooltips">Tooltip ohne Animation</a>
</li>
<li>
<a href="#"
data-toggle="tooltip"
data-delay='{ "show": 100, "hide": 1000 }'
title="Inhalt des Tooltips">Tooltip mit delay</a>
</li>
<li>
<a href="#"
data-toggle="tooltip"
data-html="true"
title="Inhalt des Tooltips mit <b></i>HTML-Code</i></b>.">Tooltip mit HTML-Inhalt</a>
</li>
</ol>