Preview On Hover

post by jefftk (jkaufman) · 2020-06-24T22:20:02.980Z · score: 20 (8 votes) · LW · GW · 17 comments

A couple years ago, Wikipedia added a feature where if you hover over an internal link you'll see a preview of the target page:

Other sites with similar features include gwern.net:

And LessWrong:

In general, I like these features a lot. They dramatically lower the barrier the following internal links, letting you quickly figure out whether you're interested. On the other hand, they do get in the way. They pop up, overlapping the text you're reading, and mean you need to be paying more attention to where the mouse goes.

I decided I wanted to add a feature like this to my website, but without any overlap. The right margin seemed good, and if you're reading this on jefftk.com with a window at least 1000px wide then hovering over any link from one of my blog posts to another should show a preview:

Here are my five most recent posts if you'd like to give it a try:

There are a lot of options for how to implement this, but I decided to use an iframe that just loads the relevant page. Feel free to look at the page source and see exactly how it works, but the general idea is:

I'm pretty happy with it, but if you find any bugs let me know!

Comment via: facebook

17 comments

Comments sorted by top scores.

comment by itaibn0 · 2020-06-25T01:50:11.912Z · score: 6 (4 votes) · LW(p) · GW(p)

I don't like the fact that the preview doesn't disappear when I stop hovering. I find the preview visually jarring enough that I would prefer to spend most of my reading time without a spurious preview window. At the very least, there should be a way to manually close the preview. Otherwise I would want to avoid hovering over any links and to refresh when I do, which is a bad reading experience.

comment by lifelonglearner · 2020-06-24T22:33:27.310Z · score: 6 (3 votes) · LW(p) · GW(p)

Can other people comment about the UX of preview on hover?

I dislike it because the pop-ups are often quite large, like on gwern.net, where they can completely block whatever it is I'm reading. Arbital-style tool-tips and the Wikipedia ones are borderline okay as they aren't too large, but I find that the visual contrast is often too jarring for me :/

comment by jefftk (jkaufman) · 2020-06-24T23:41:19.666Z · score: 4 (2 votes) · LW(p) · GW(p)

I set mine up so that the pop-ups wouldn't cover content, putting them in the right margin. Does that fix the UX for you?

comment by lifelonglearner · 2020-06-24T23:57:40.348Z · score: 2 (1 votes) · LW(p) · GW(p)

Yes, having them to the margin is much much better. :)

comment by Zvi · 2020-06-25T12:22:23.603Z · score: 2 (1 votes) · LW(p) · GW(p)

Do you know a good way to implement a preview function in Wordpress?

comment by jefftk (jkaufman) · 2020-06-25T12:44:33.622Z · score: 2 (1 votes) · LW(p) · GW(p)

It looks like there used to be a plugin for this? https://wordpress.org/plugins/wp-live-preview-links/ https://github.com/soderlind/wp-live-preview-links ? But visiting the demo page https://soderlind.no/wp-live-preview-links/ it doesn't seem to work anymore.

comment by Raemon · 2020-06-24T22:46:18.374Z · score: 2 (1 votes) · LW(p) · GW(p)

It seems plausible to me that having hovers Off To The Side may be better than the current thing LW does. I do find that the jefftk.com hovers are... too far off to the side. I'd prefer them if they were basically just to the right of the main column. 

(I also don't really mind them appearing in the main body, perhaps not surprising since I helped implement the LW ones, but it'd make sense to me if other people preferred them to-the-side. I think I generally find it less distracting to have the Right By The Hover when I deliberately moused over them, but if I'm just scrolling quickly it can sometimes be annoying. Though this might be solved by just implementing a slight delay to their appearance)

comment by Dagon · 2020-06-27T15:45:17.707Z · score: 2 (1 votes) · LW(p) · GW(p)

It's very tricky to make it convenient for most, without losing accessibility for some. Preferences and device capabilities vary by a whole lot, and unless you're going to do the work to detect or ask people, and then support multiple mechanisms, you are probably best off being as close to minimal and standard as possible.

My primary mechanism for reading branching sites/articles (those with multiple topics I want to follow) is to open a lot of tabs, then work forward through them, opening more in the process. Hover is convenient to give me a quick idea of whether it's worth opening a tab, but it's really inconvenient if it stays too long or slows me down when I already know I want the tab.

LW goes a bit too far toward this, for me. It's fine on desktop, where I have lots of screen real-estate and the mouse click/focus works to dismiss the popups/hovers pretty well. It kind of annoys me when middle-click or control-click don't work to bring up a new tab (for shortforms or some comment-notice links), but that's tolerable. On Chrome on iOS, at least, it's _very_ annoying. in order to long-press to get the "open in new tab" option, it brings up a window that obscures a lot of other items, and there's no obvious way on the small screen to dismiss the "hover" without changing the underlying view in some way.

comment by jefftk (jkaufman) · 2020-06-24T23:54:01.456Z · score: 2 (1 votes) · LW(p) · GW(p)

I do find that the jefftk.com hovers are... too far off to the side. I'd prefer them if they were basically just to the right of the main column.

You're right, that's where they should go. I'll go mess with the CSS.

comment by jefftk (jkaufman) · 2020-06-25T00:40:50.662Z · score: 2 (1 votes) · LW(p) · GW(p)

Fixed!

comment by kithpendragon · 2020-06-25T10:49:16.976Z · score: 1 (1 votes) · LW(p) · GW(p)

I don't think it matters that the link preview covers the content because the preview should be where your attention is when you're engaging with that feature. Now that it's fairly standard for the content section to take up the middle ~1/3 of the screen, there's plenty of empty space on both sides where the mouse cursor can be routinely kept out of the way. It's more useful to have the cursor near the scrollbar or browser UI most of the time anyway. In fact, it's optimal to keep the cursor in a set region of the screen when you aren't using it so you always know where it is. Accidentally triggering the preview window can be a useful indicator that the cursor is in the wrong place a sub-optimal resting position.

comment by jefftk (jkaufman) · 2020-06-25T12:41:21.004Z · score: 2 (1 votes) · LW(p) · GW(p)

the preview should be where your attention is when you're engaging with that feature

I don't want to force users to engage with the feature if they don't want to, or keep their cursors in any particular place.

comment by kithpendragon · 2020-06-26T18:16:57.365Z · score: 1 (1 votes) · LW(p) · GW(p)

(nodding) I hear that. One more note: other than using the link text as the title of the preview, I don't see anything visually connecting the preview with the link. This makes the feature substantially less discoverable than the current solution, and it could potentially be confusing to have a seemingly random box suddenly appear on the side of the page for no immediately apparent reason if you accidentally hover over a link.

comment by rmoehn · 2020-06-25T02:53:30.736Z · score: 1 (1 votes) · LW(p) · GW(p)

I like it the way it is!

comment by romeostevensit · 2020-06-24T23:26:11.771Z · score: 1 (2 votes) · LW(p) · GW(p)

I think this is especially great for rapid development of technical jargon in nascent fields.

comment by acdw · 2020-06-24T22:58:09.874Z · score: 1 (1 votes) · LW(p) · GW(p)

On Firefox/Windows, hovering over the link turns it purple, though I haven't *really* visited it. I'm not sure how to change it or if it matters, but I use the :visited pseudo-class often when browsing the web.

comment by jefftk (jkaufman) · 2020-06-24T23:45:00.045Z · score: 2 (1 votes) · LW(p) · GW(p)

Weirdly, this isn't permanent: it goes away on refresh. So this isn't actually adding entries to your visited list?