Tooltips

<button type="button" class="btn btn-gray" data-tooltip="Tooltip on the top" data-placement="top" data-toast='{"title":"Tooltip on the top","text":"It shows under the pointer and on keyboard focus, and names what the button does.","tone":"info"}'>Top</button>
<button type="button" class="btn btn-gray" data-tooltip="Tooltip on the bottom" data-placement="bottom" data-toast='{"title":"Tooltip on the bottom","text":"It shows under the pointer and on keyboard focus, and names what the button does.","tone":"info"}'>Bottom</button>
<button type="button" class="btn btn-gray" data-tooltip="Tooltip on the left" data-placement="left" data-toast='{"title":"Tooltip on the left","text":"It shows under the pointer and on keyboard focus, and names what the button does.","tone":"info"}'>Left</button>
<button type="button" class="btn btn-gray" data-tooltip="Tooltip on the right" data-placement="right" data-toast='{"title":"Tooltip on the right","text":"It shows under the pointer and on keyboard focus, and names what the button does.","tone":"info"}'>Right</button>

<button type="button" class="btn btn-gray btn-icon" aria-label="Bold" data-tooltip="Bold" aria-pressed="false" data-toggle-pressed><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" class="btn btn-gray btn-icon" aria-label="Italic" data-tooltip="Italic" aria-pressed="false" data-toggle-pressed><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
<button type="button" class="btn btn-gray btn-icon" aria-label="Insert link" data-dialog-open="new-insert-link" data-tooltip="Insert link"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>