Tooltips

<button type="button" class="btn btn-gray" data-bs-toggle="tooltip" data-bs-title="Tooltip on the top" data-bs-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-bs-toggle="tooltip" data-bs-title="Tooltip on the bottom" data-bs-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-bs-toggle="tooltip" data-bs-title="Tooltip on the left" data-bs-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-bs-toggle="tooltip" data-bs-title="Tooltip on the right" data-bs-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-bs-toggle="tooltip" data-bs-title="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-bs-toggle="tooltip" data-bs-title="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-bs-toggle="modal" data-bs-target="#new-insert-link" data-bs-title="Insert link"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>