<dv class="row" style="padding: 100px 0;">
<div class="col">
<span data-tooltip="bottom" title="Vihjemulli tekst">
<button class="button " >
All
</button>
</span>
</div>
<div class="col"><span data-tooltip="left" title="Vihjemulli tekst">
<button class="button " >
Vasakul
</button>
</span></div>
<div class="col">
<span data-tooltip="right" title="Vihjemulli tekst">
<button class="button " >
Paremal
</button>
</span>
</div>
<div class="col">
<span data-tooltip="top" title="Vihjemulli tekst">
<button class="button " >
Üleval
</button>
</span>
</div>
</dv>
{
"tooltipText": "Vihjemulli tekst"
}
Pikad vihjed võimaldavad küll kuvada rohkem teksti, kuid siiski tuleks piirduda paari lausega. Nende eesmärk on anda kasutajale kiiret lisainfot kohtades, kuhu seda poleks muidu võimalik lisada.
<dv class="row" style="padding: 200px 0px;">
<div class="col">
<span data-tooltip="bottom" title="Vihjemulli tekst">
<button class="button " >
All
</button>
<div class="tooltip__content">
<p><strong>Vihjemulli pealkiri</strong></p>
<p>If you wish to make an apple pie from scratch, you must first invent the universe.</p>
</div>
</span>
</div>
<div class="col">
<span data-tooltip="right" title="Vihjemulli tekst">
<button class="button " >
Paremal
</button>
<div class="tooltip__content">
<p><strong>Vihjemulli pealkiri</strong></p>
<p>If you wish to make an apple pie from scratch, you must first invent the universe.</p>
</div>
</span>
</div>
<div class="col"><span data-tooltip="left" title="Vihjemulli tekst">
<button class="button " >
Vasakul
</button>
<div class="tooltip__content">
<p><strong>Vihjemulli pealkiri</strong></p>
<p>If you wish to make an apple pie from scratch, you must first invent the universe.</p>
</div>
</span></div>
<div class="col">
<span data-tooltip="top" title="Vihjemulli tekst">
<button class="button " >
Üleval
</button>
<div class="tooltip__content">
<p><strong>Vihjemulli pealkiri</strong></p>
<p>If you wish to make an apple pie from scratch, you must first invent the universe.</p>
</div>
</span>
</div>
</dv>
{
"tooltipText": "Vihjemulli tekst"
}