Let's have fun

Let's have fun

Tooltips

Info

With the tooltip classes of this framework you can place a tip message above, right, below or left of a link, text or an image. There is also a dynamic tooltip in which you can show a small image plus text as a tip.

The tooltips

Top

<a  class="link" href="#" data-tooltip="Tip"></a>

Righ

<a  class="link" href="#" data-tooltip-right="Tip"></a>

Bottom

<a  class="link" href="#" data-tooltip-bottom="Tip"></a>

Left

<a  class="link" href="#" data-tooltip-left="Tip"></a>

II am a dynamic tooltip

Dynamische Tooltip 

tooltip
tooltip-dynamic
<p class="text-center">
  <a href="javascript:void(0);" class="tooltip link">
    <span class="tooltip-dynamic">
      <b>I am a dynamic tooltip</b><br><br>
      <img src="" alt="">
    </span>
    Dynamische Tooltip
  </a>
</p>

Tooltip not on a link

<p class="fit-content box-center" data-tooltip="Text">Text</p>

Above an image

<p class="fit-content box-center">
  <a href="javascript:void(0);" data-tooltip="Tip">
    <img class="image" src="" alt="">
  </a>
</p>