Tooltip

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

Example
External Link
Sophisticated financial management 
<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

Example
External Link
Sophisticated financial management 
<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>

Top variation

Example
External Link
Sophisticated financial management 
<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>

With Children variation

Tooltips can be placed around children components to act on the whole element.

Example
External Link
Placeholder 
<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 Donts
do iconDo ensure messages are clear and concise.
do-not iconDon’t use overly long messages that flow over 2 lines.
do iconDo 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.