search

cognitive-engineering-lab / rust-book

The Rust Programming Language: Experimental Edition
https://rust-book.cs.brown.edu
Other
509 stars 83 forks source link

Bring back transparent border for feedback tooltip #3

Closed connorff closed 1 year ago

connorff commented 1 year ago

This PR re-introduces a previously-removed transparent border between the highlighted text and tooltip. This adds some spacing between the two but also very slightly changes the look of the tooltip because the border radius no longer exists on the side facing the highlight.

Previous tooltip position (wide screen)

image

New tooltip position (wide screen)

image

Previous tooltip position (mobile)

image

New tooltip position (mobile)

image

willcrichton commented 1 year ago

Oh I see what the CSS is doing. But it looks a little ugly since it causes two of the tooltip borders to be un-rounded.

Can you accomplish the same thing using the offset field? https://popper.js.org/docs/v2/modifiers/offset/

connorff commented 1 year ago

Oh I see what the CSS is doing. But it looks a little ugly since it causes two of the tooltip borders to be un-rounded.

Can you accomplish the same thing using the offset field? https://popper.js.org/docs/v2/modifiers/offset/

I initially was using the offset field, but when the user's cursor was in between the highlight and the tooltip, the tooltip disappeared (since neither was hovered over). The transparent border was necessary to "extend" the element so there's effectively no gap between the highlight and tooltip (despite looking like there is). I'll look into other ways to prevent this without removing the rounded borders.

willcrichton commented 1 year ago

Ah ok I see the issue. I'll merge this for now and we can find a more aesthetic solution later.