Tooltips

Met de tooltip classes van dit framework kun je een tipbericht boven, rechts, onder of links van een link, tekst of afbeelding plaatsen. Er is ook een dynamische tooltip waarin je een kleine afbeelding plus tekst als tip kunt weergeven.

Boven, rechts, onder en links van een link

Top

<a href="#" data-tooltip="Ik ben jouw tooltip">Top</a>

Rechts

<a href="#" data-tooltip-right="Ik ben jouw tooltip">Top</a>

Onder

<a href="#" data-tooltip-bottom="Ik ben jouw tooltip">Top</a>

Links

<a href="#" data-tooltip-left="Ik ben jouw tooltip">Top</a>

Dynamische tooltip van een link

Ik ben een dynamische tooltip

Dynamische Tooltip

<h4 class="txt-center">
  <a href="javascript:void(0);" class="tooltip">
    <span class="tooltip-dynamic">
      <b>Ik ben een dynamische tooltip</b><br><br>
      <img src="" alt="image">
    </span>
    Dynamische Tooltip
  </a>
</h4>

Tooltip op gewone tekst

Lorem ipsum.Nulla elementum tristique ultricies regular text Lorem ipsum.Nulla elementum tristique ultricies

<p>Lorem ipsum <span class="tooltip-dotted" data-tooltip="Ik ben jouw tip op reguliere tekst">Tekst</span> Lorem ipsum</h4>

Tooltip op een afbeelding

<div class="fit-content box-center">
  <a href="javascript:void(0);" data-tooltip="Ik ben jouw tip boven op een afbeelding">
    <img class="image" src="" alt="image">
  </a>
</div>