Tooltips

The name of an icon button, on hover and on focus

Tooltips

They stay while the pointer is over them and close with Escape (WCAG 1.4.13).

Show the code

<button type="button" class="btn btn-icon" aria-label="Edit" data-tip="Edit">
<i class="ti ti-pencil">
</i>
</button>
<button type="button" class="btn btn-icon" aria-label="Duplicate" data-tip="Duplicate">
<i class="ti ti-copy">
</i>
</button>
<button type="button" class="btn btn-icon" aria-label="Delete" data-tip="Delete">
<i class="ti ti-trash">
</i>
</button>