Overview
Tooltips are designed to display additional information about specific content. It is especially useful as helpful instructions, on-boarding or guidelines. You can simply hover over the component on non touch screen device and click on the component on a touch screen device to view the tooltip. the fly-out content can be aligned to the left, right, top or bottom of the cursor.
Examples
Default variation
<div class="text-center">
<a>
<span data-tooltip-text="Manage your general ledger, accounts payable/receivable, cash, currency, tax, fixed assets and payroll."
data-myob-tooltip> Sophisticated financial management </span>
</a>
</div>Left variation
<div class="text-center">
<a>
<span data-tooltip-text="Manage your general ledger, accounts payable/receivable, cash, currency, tax, fixed assets and payroll." data-tooltip-direction="left" data-myob-tooltip>
Sophisticated financial management
</span>
</a>
</div>Right variation
<div class="text-center">
<a>
<span data-tooltip-text="Manage your general ledger, accounts payable/receivable, cash, currency, tax, fixed assets and payroll." data-tooltip-direction="right" data-myob-tooltip>
Sophisticated financial management
</span>
</a>
</div>Top variation
<div class="text-center">
<a>
<span data-tooltip-text="Manage your general ledger, accounts payable/receivable, cash, currency, tax, fixed assets and payroll."
data-tooltip-direction="top" data-myob-tooltip>
Sophisticated financial management
</span>
</a>
</div>Children variation
<div class="text-center">
<div data-tooltip-text="Manage your general ledger, accounts payable/receivable, cash, currency, tax, fixed assets and payroll."
data-myob-tooltip>
<div class="image">
<div class="image__body">
<img src="" alt="Placeholder" data-interchange="[http://placehold.it/800x150,http://placehold.it/800x450]" data-myob-image>
</div>
</div>
</div>
</div>Usage guidelines
| Dos | Don'ts |
|---|---|
 Do ensure messages are clear and concise.
|
 Don’t use overly long messages that flow over 2 lines.
|
|
Do chose an alignment that will fit best on the screen, without blocking or covering other crucial information.
|
Implementation guidelines
| Name | Attribute | Description |
|---|---|---|
| Content |
data-tooltip-text
|
Content to be displayed within the Tooltip. |
| Direction |
data-tooltip-direction
|
Change the placement of the Tooltip. Accepts left, right and top. Default is bottom. |