I was just hovering over the '...' next to the backlinks on a page on http://ikiwiki.info/. In terms of the size of my browser window, this was towards the bottom-right of the screen.

When I hovered over the '...', the additional backlinks float appeared. This caused the page length to grow down, meaning a horizontal scrollbar was added to the page. This meant the text reflowed, and the '...' moved outside of my mouse pointer region.

This caused an infinite loop of box appears... text moves, box disappears... box re-appears.. which was not very visually pleasant.

In general I think that the onhover float is a bit of bad UI. Even a truncated list of backlinks looks cluttered due to there being no delimiters. I moved to having an always-complete list of backlinks and having them as LI elements inside a UL to make it look neater, although I appreciate that would make some pages very long indeed.

How about doing something a little like toggle for the excess items instead?

-- Jon

An additional, related issue: if the box expands beyond the bottom of the page, you might move your mouse pointer to the scrollbar in order to move further down the list, but of course then you are outside the hover region.

-- Jon

I agree, browser handling of this CSS is often not good.

A toggle would be the perfect UI, but the heaviness of needing to include 30 lines of javascript to do it, plus then it only working with javascript enabled, is also not optimal.

Another idea would be to make the "..." a link to the ikiwiki cgi. The cgi could then have a mode that displays all the backlinks of a page in a list.

Yet another idea: Find some more refined CSS for handling a variable size popup.. --Joey

The HTML5 "Details" tag would be perfect: https://www.w3schools.com/TAGS/tag_details.asp

example

here's an example

The above works for me on ikiwiki.info which does not have html5:1 so far as I can tell — Jon, 2020-04-21

Patch in my repo, branch more-backlinks-details-tag. (I must say this looks much nicer, IMHO) —Jon, 2020-10-07

I've refreshed that branch after exploring this a little more. The main problem I had with my previous solution (simply substituting the floating box for a details tag) was how to integrate the overflow links nicely with the normal ones. Since details is a block-level tag, by default it would begin on a line after the existing links, and I couldn't settle on something which looked particularly integrated. E.g.:

Links: Foo Bar Baz…

Continued:

Baz Bar Foo

I decided that, in the event the backlinks list overflowed, it made more sense to replace the whole list with a details tag, and keep all the links together. E.g.

Links:

Foo Bar Baz Baz Bar Foo

So that's what I've settled on. done. — Jon, 2024-11-19