“Info Icon” Component

Design: zeplin.

The info icon is a signifier that additional text information will be displayed in a tooltip on mouse-over or tap of the icon. It should be used cautiously. If the additional information is critical to a task, it should not be hidden behind an info icon.

The info icon should be placed beside (to the right of) the content to which the additional information pertains.

<x-info-icon message="Your text here."/>