doc/bugs/backlinks_onhover_thing_can_go_weird.mdwn

   1 I was just hovering over the '...' next to the backlinks on a page on
   2 <http://ikiwiki.info/>. In terms of the size of my browser window, this was
   3 towards the bottom-right of the screen.
   4
   5 When I hovered over the '...', the additional backlinks float appeared. This
   6 caused the page length to grow down, meaning a horizontal scrollbar was added
   7 to the page. This meant the text reflowed, and the '...' moved outside of my
   8 mouse pointer region.
   9
  10 This caused an infinite loop of box appears... text moves, box disappears...
  11 box re-appears.. which was not very visually pleasant.
  12
  13 In general I think that the onhover float is a bit of bad UI. Even a truncated
  14 list of backlinks looks cluttered due to there being no delimiters. I moved to
  15 having an always-complete list of backlinks and having them as LI elements
  16 inside a UL to make it look neater, although I appreciate that would make some
  17 pages very long indeed.
  18
  19 How about doing something a little like [[plugins/toggle]] for the excess
  20 items instead?
  21
  22 -- [[Jon]]
  23
  24 ----
  25
  26 An additional, related issue: if the box expands beyond the bottom of the
  27 page, you might move your mouse pointer to the scrollbar in order to move
  28 further down the list, but of course then you are outside the hover region.
  29
  30 -- [[Jon]]
  31
  32 > I agree, browser handling of this CSS is often not good.
  33 >
  34 > A toggle would be the perfect UI, but the heaviness of needing
  35 > to include 30 lines of javascript to do it, plus then it only working
  36 > with javascript enabled, is also not optimal.
  37 >
  38 > Another idea would be to make the "..." a link to the ikiwiki cgi.
  39 > The cgi could then have a mode that displays all the backlinks of a page
  40 > in a list.
  41 >
  42 > Yet another idea: Find some more refined CSS for handling a variable
  43 > size popup.. --[[Joey]]
  44
  45 >> The HTML5 "Details" tag would be perfect:
  46 >> <https://www.w3schools.com/TAGS/tag_details.asp>
  47 >> <details><summary>example</summary>here's an example</details>
  48 >> The above works for me on ikiwiki.info which does not have `html5:1`
  49 >> so far as I can tell *— [[Jon]], 2020-04-21*
  50
  51 >>> [[!tag patch]]Patch in my repo, commit f051f84f632c3eaf86c5cff172692ce71ad5375d.
  52 >>> [[!template id=gitbranch branch=jon/more-backlinks-html5-use-details-tag author="[[Jon]]"]]
  53 >>> (I must say this looks *much* nicer, IMHO) *—[[Jon]], 2020-10-07*