Tooltip

Das Modul einbinden

Um die interaktiven Elemente nutzen zu können, muss die Einbindung über den Meta-Tag features erfolgen:

----
Features: tool-tip
----

Beispiel 1

<p>
    Das ist ein Beispieltext mit einem <span class="tooltip-trigger" data-tooltip="my-tooltip-1">Tooltip Element</span> in der Mitte. Klicke darauf, um das Tooltip anzuzeigen.
</p>

<div class="tooltip" id="my-tooltip-1">
  <p>
    <strong>Tooltip</strong>
    <br>
    Das ist ein interaktives Element, das Zusatzinformatioanzeigt!
  </p>
</div>

Das ist ein Beispieltext mit einem Tooltip Element in der Mitte. Klicke darauf, um das Tooltip anzuzeigen.

Beispiel 2

<p>
    <span class="tooltip-trigger" data-tooltip="my-tooltip-2">Tooltip Element</span> mit zentriertem Text.
</p>

<div class="tooltip text-center" id="my-tooltip-2">
  <p>
    <strong>Tooltip</strong>
    <br>
    Hier mit zentriertem Text
  </p>
</div>

Tooltip Element mit zentriertem Text.