Proiecte internaţionale

Tooltips

Category: Add-ons Written by Super User Hits: 459

Yjsg v2 is equipped with simple CSS tooltips that you can use on any HTML elements.

options:

Options Description
data-yjsg-tip *Required option. Data attribute that contains the tooltip.
class="yjsg-tip-left" Display tooltip on the left side.
class="yjsg-tip-right" Display tooltip on the right side.
class="yjsg-tip-top" Display tooltip above the element
class="yjsg-tip-bottom" Display tooltip under the element

example:

Default tooltip

example:

Left tooltip

example:

Right tooltip

example:

Bottom tooltip

markup:

<a class="button" href="#" data-yjsg-tip="I am CSS tooltip">
    Default tooltip
</a>
<a class="yjsg-tip-left button" href="#" data-yjsg-tip="I am left tooltip">
    Left tooltip
</a>
<a class="yjsg-tip-right button" href="#" data-yjsg-tip="I am right tooltip">
    Right tooltip
</a>
<a class="yjsg-tip-bottom button" href="#" data-yjsg-tip="I am bottom tooltip">
    Bottom tooltip
</a>