Menu and tooltip
The menu button pattern: click, Enter, Space or ArrowDown opens it (ArrowUp opens on the last item); arrows wrap, Home and End jump, a letter jumps to the next item that starts with it, Escape closes and returns to the trigger. The list is drawn in the top layer with the Popover API, so a table cell or a scroll area never clips it, and it is positioned through the CSS object model, which a strict CSP allows. A tooltip shows after a delay on hover and at once on keyboard focus, stays while the pointer is on it (WCAG 1.4.13) and describes, never names: an icon-only button still needs aria-label.
Chosen:
<p class="toolbar">
<xo-menu id="demo-menu" label="Row actions">
<button xo-menu-trigger>Actions</button>
<button type="button">Edit</button>
<button type="button">Duplicate</button>
<a href="#menu-link">Open link</a>
</xo-menu>
<button xo-tooltip="Save the draft (Ctrl+S)" aria-label="Save"><span class="ic" data-ic="download" aria-hidden="true"></span></button>
<button xo-tooltip="Keyboard focus shows this at once">Focus me</button>
</p>
<p class="hint">Chosen: <output id="menu-out">nothing yet</output></p>// The menu page: choosing an item runs it as it is (a handler, a link, xo-click); here a click handler notes it.
document.querySelector('#demo-menu').addEventListener('click', (e) => {
const item = e.target.closest('button:not([xo-menu-trigger]), a');
if (item) document.querySelector('#menu-out').textContent = item.textContent;
});