Skip to main content

Tooltip

Overview

Tooltips are used to give users extra information to users to explain usage of a particular object or tool. Often tool tips are used in forms to explain to the user why as certain items is being requested, or how the information should be supplied… for example password requirements.

Be sure to make this component touch screen and screen reader compliant.

Contents

Design

Closed state closed state

Open state open state

Functionality

OnHover/OnTouch/OnFocus tooltip shows in open state.

<a name=“code”></a>

Code

HTML

closed

  ![closed state](../assets/img/forms/tooltip_closed.png "Closed State")

open

  ![open state](../assets/img/forms/tooltip_open.png "Open State")

SCSS