Component > Code Description

The code snippet can show an optional description. For many applications this will be self-evident, but it can be useful to leave the user in no doubt as to how this code works or in what applications it can be used.

Anatomy

Title and description

Usage

The optional description should add additional context to the snippet, for example: ways the code can be used, any explanatory notes, or caveats.

States

If present, an ‘i’ (information) icon appears next to the code snippet title.

On hover, a tooltip is shown over the ‘i’ icon which contains the text of the description.

Behaviours

On hover, a tooltip is shown over the ‘i’ icon which contains the text of the description. It should truncate with an ellipsis if it passes a reasonable length so as not to break the view.

On a device with no hover (touch screen), a single tap displays the tooltip and a second tap anywhere on the view will close the tooltip.