css-tooltip

These are some basic tooltips using only css, they are very basic so only use them for simple effects

Limitations:

only a single line is displayed as a tooltip
the tooltip is always aligned to whatever you define so might go off the screen
It does not work on special html elements linke <input>, <img>, ...

<div class="for-demo-only" style="margin:50px 160px;">
    <a data-tooltip="[TOOLTIP TEXT]">
        Content with tooltip
    </a>
</div>

Placed on the left

<div class="for-demo-only" style="margin:50px 160px;">
    <a data-tooltip="[TOOLTIP TEXT]" data-placement="left">
        Content with tooltip
    </a>
</div>

Placed on the bottom

<div class="for-demo-only" style="margin:50px 160px;">
    <a data-tooltip="[TOOLTIP TEXT]" data-placement="bottom">
        Content with tooltip
    </a>
</div>

Placed on the right

<div class="for-demo-only" style="margin:50px 160px;">
    <a data-tooltip="[TOOLTIP TEXT]" data-placement="right">
        Content with tooltip
    </a>
</div>