Tooltips

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

Tooltips

Centred above the button, or below it when there is no room. 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>