Atlas tooltips appear partially off-screen

In the Atlas relay/bridge details page, there are "tooltips" that show a description when you hover over each item.

When using Tor Browser at its default window size, the tooltips for the items in the left-hand column appear partially off-screen, so that the text is cut off. These include "Nickname", "OR Addresses", "Contact", "Dir Address", "Advertised Bandwidth", "IPv4 Exit Policy Summary", "IPv6 Exit Policy Summary", and "Exit Policy".

For example: if I open https://atlas.torproject.org/#details/5CECC5C30ACC4B3DE462792323967087CC53D947 , and hover over "OR Addresses", I see

ses and ports where the relay
for incoming connections from
and other relays.

added component::metrics/relay search owner::cypherpunks priority::medium resolution::fixed severity::minor status::closed type::defect labels

Placing the tooltips on the right of the items is IMO the easiest way to solve this issue. IIRC before #9913 (moved) was merged the popovers would also appear on the right. I'm working on a patch.

Trac:
Owner: irl to cypherpunks
Status: new to assigned

Trac:
0001-Use-a-specific-selector-for-styling-the-tooltips.patch

Trac:
0002-Simplify-the-code-enabling-the-tooltips.patch

Trac:
0003-Place-tooltips-on-the-right-of-the-elements.patch

I took the opportunity to improve some of the code related to tooltips besides just fixing the issue at hand.

Trac:
Status: assigned to needs_review

Trac:
0004-fixup-Simplify-the-code-enabling-the-tooltips.patch

I forgot to change the bridge page in patch 0002 so I've added a fixup patch. Please squash before merging.

Cool. This seems to work down to screen widths of 245px, at which point we have other problems like the search box being too big, etc.

Thanks for your work on this, merged and will deploy shortly.

Trac:
Resolution: N/A to fixed
Status: needs_review to closed

closed