Yjsg v2 is equipped with simple CSS tooltips that you can use on any HTML elements.
| 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 |
<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>
Lorem ipsum dolor sit amet, consectetur Proclivi currit oratio. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.
Satisne ergo pudori consulat, si quis sine teste libidini pareat? Bonum integritas misera debilitas. Certe non potest.
Si stante, videlicet vult, salvam esse se, quod concedimus; Duo Reges: constructio interrete.
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri
Vivamus porta eros et neque vulputate pretium. Viva mus vel velit metus, sceleri