Text toolbar, show top-row button tooltips above the buttons so they don't cover the second row

When you select text in a block, the rich-text formatting toolbar can wrap onto two rows. Hovering a button in the top row shows its tooltip directly below it, which lands on top of the button in the row beneath. In practice this makes the second row awkward to use. For example, hover Bold to check it's the right control, then go to set alignment (in the row below), the Bold tooltip is now covering the alignment button, so you have to move the mouse away to dismiss the tooltip before you can click it.

Suggested improvement:

Anchor the top-row tooltips above their buttons rather than below, so they don't overlap the controls underneath. Ideally decide the direction based on available space, top row opens upward, bottom row opens downward, so you don't just invert the overlap onto the other row.

For reference, the toolbar renders into <div id="portal"> as "course-action-preview-tooltip__wrapper", with tooltips currently anchored below their trigger (top = triggerBottom + gap). Anchoring above would be top = triggerTop − tooltipHeight − gap.