Re: A minor bug in doc. Hovering over heading shows # besides it.

On Thu, 17 Oct 2024 at 20:20, Daniel Gustafsson <daniel@yesql.se> wrote:
> My main concern is that the relative positioning will push it off screen with a
> break on smaller viewports (like phones).

I can recreate what you sent in the screenshot, but I have to make my
browser window as small as it will go and adjust the browser scaling
to at least 150%. I don't know how to hover over a link on my phone to
get tooltips to appear. Is it even possible? I tried hovering over it
with my left finger, but it didn't work ;)

> I was trying to improve on it but didn't succeed, my web-skills amount to very
> little so it might be a case of a blind leading a blind here =) Maybe if it's
> placed in a Z position where it's rendered on top of the other content (to keep
> it from adding vertical scroll) and using absolute positioning anchored on the
> <h2> tag?  That would require the h2 to use a position: attribute though.

I don't know. I've attached the CSS and an example HTML file if that
makes it easier for someone with the knowledge to play around with it.
For anyone who wants to try it, the CSS class of interest starts at
line 181 of the .css file.

I tried using the overflow property [0], but it didn't seem to behave
like I wanted it to. Setting it to "hidden" only seems to work
sometimes on Chrome. Not sure if that's a browser or user problem.

I tried to recreate the same wrapping issue you demonstrated with [1],
but their tooltip text does not enlarge with browser scaling, and
using browser scaling is the only way I can recreate the wrapping
issue you mentioned. I'm not sure how to make the CSS class's text
size immune to the effects of browser scaling.

One other difference in [1] vs what we have is that they put the # on
the left of the heading. There's less chance of having horizontal
wrapping issues when the mouse cursor is over on the left side.
However, we don't seem to have much of a margin for doing that.

David

[0] https://www.w3schools.com/css/css_overflow.asp
[1] https://stackoverflow.blog/2024/07/24/developers-want-more-more-more-the-2024-results-from-stack-overflow-s-annual-developer-survey/