Tip

Add a tip to display on hover.

Plays nicely with screen readers, so we won't need to use classes like .sr-only or .visually-hidden whenever using this component.

Unread messages

Account settings

<a href="#" class="ca-button ca-button-utility">
  <ca-icon name="mail"></ca-icon>
  <ca-tip>Unread messages</ca-tip>
</a>
<hr />
<a href="#" class="ca-button ca-button-utility">
  <ca-icon name="mail"></ca-icon>
  <ca-tip top="">Unread messages</ca-tip>
</a>
<hr />
<a href="#" class="ca-button ca-button-utility">
  <ca-icon name="account"></ca-icon>
  <ca-tip right="">Account settings</ca-tip>
</a>
<hr />
<a href="#" class="ca-button ca-button-utility">
  <ca-icon name="account"></ca-icon>
  <ca-tip left="">Account settings</ca-tip>
</a>