Tooltip

Tooltips are small items of information which are displayed in the context of an item that needs further explanation.

Design

Check out this tooltip

HTML

1. .tooltip

  • Sets the content of the tooltip. Only text is allowed - HTML and other content is not supported.
  • Tooltip should get inserted in the dom when triggered and fully removed when it is dismissed.
  • Top and left position needs to be calculated to determine where the tooltip is positioned.

2. .tip-

  • Appended to .tooltip. Could be the following positions: tip-top, tip-left, tip-bottom, tip-right.

2. .nub

  • Styles for the tooltip nub/carot.

 JS

1. [tooltip]

  • Sets the content of the tooltip. Only text is allowed - HTML and other content is not supported.

2. [tooltip-placement]

  • Controls tooltip positioning. Value should be right, unless there is insufficient space, in which case it should be left.

N.B. Please always use tooltip-append-to-body="true". You cannot guarantee your tooltip is wrapped in a close enough parent that is relatively positioned, for the inline tooltip to have the correctly calculated top value. This is a naive default by Angular Foundation, which Foundation itself doesn't do.

Accessibility

The tooltip is a hidden element from the user, unless the appropriate content is interfaced with. It should be hidden from screen readers until it is revealed.

  • The tooltip should be triggered by focus on its trigger.
  • The tooltip should receive focus once it is revealed, and should disappear when it loses focus.
  • The tooltip should contain [aria-describedby] which refers to its trigger.
  • You should be able to leave the dropdown by tabbing out, or pressing the escape key.