Link Preview popover

[lcnbr]

Currently, only citations generate popovers on hover. It would be so awesome if all internal links behaved that way. Links to sections could be hovered over to preview the content without actually going to that link. Equation and image references would be the most useful as this would greatly reduce the jarring effect of clicking on a link. The best implementation of this sort of thing I've seen yet is on gwern.net, where the popovers also work on external sites and recursively!

[kris-brown]

I also am interested in this! For my purposes, just the title and subtitle appearing on hover would suffice.

[mcanouil]

To note, this is only (S)CSS and maybe a Lua filter to apply the attributes to all hyperlinks (or some).¹
See the following example: https://mdbootstrap.com/docs/standard/extended/popover-on-hover/ or from Bootstrap documentation website https://getbootstrap.com/docs/5.1/components/popovers.

Footnotes

1. I'll try later to make a small Quarto example using the above. ↩

[cscheid]

Ok, I think I know what's happening. This is your filter:

function Link(link)
  link.attributes["target"] = "_blank"
  link.attributes["color"] = "hotpink"
  link.attributes["background-color"] = "gold"
  return link
end

The problem here is that color and background-color are CSS styles, and not attributes. (They will probably appear in your generated HTMl as data-color="hotpink" and data-background-color="gold", because attributes that are not part of the "standard" set of attributes allowed by an HTML element become "dataset" attributes.) Try, instead:

function Link(link)
  link.attributes["target"] = "_blank"
  link.attributes["style"] = "color:hotpink; background-color:gold"
  return link
end

However, let me back up for a second: if all you're looking to do is change the appearance of the link, why not use CSS directly?

[mcanouil]

The issue here is a bit more complex, since the idea is to get a hover popover where the content is the preview of the link, e.g., for internal link, it can be relatively easy.
The Lua filter would add data-mdb-toggle="popover" and data-mdb-trigger="hover", but also the content of the popover data-mdb-content="The full title of the section for example".

function Link(link)
  link.attributes["mdb-toggle"] = "popover"
  link.attributes["mdb-trigger"] = "hover"
  link.attributes["mdb-content"] = "Some content filled from a more complex filter using cross-ref?"
  return link
end

[kris-brown]

Thanks! I changed the newpagelink.lua to reflect that example but don't see anything popover when I hover on a link (I can control the style now though, thanks to the earlier comment!)

[mcanouil]

Note that Bootstrap has a slightly different implementation of the Popper JavaScript library.
Read and check that you set all the requirements: https://getbootstrap.com/docs/5.1/components/popovers.
Quarto does not use the "bundle" version of Bootstrap, meaning, the Popper library is not loaded, unless for HTML format and when hover is activated for footnotes/citations (code: https://github.com/quarto-dev/quarto-cli/blob/main/src/format/html/format-html.ts#L299-L306).

function Link(link)
  link.attributes["bs-toggle"] = "popover"
  link.attributes["bs-trigger"] = "hover"
  link.attributes["bs-content"] = "Some content filled from a more complex filter using cross-ref?"
  return link
end

[kris-brown]

I've made a few more earnest attempts at this in my test repo. If I understand correctly, that statement about Popper being loaded isn't responsible for my problems because I happen to be using HTML format and have hover activated for footnotes/citations. I see popper and tippy loaded when inspect the page source, at least.

By merely changing the "title" attribute, I can now get some link-dependent content to appear on hover (link.attributes["title"] = link.target). I'm happy to use this as a workaround while trying to address the interesting problem of getting content filled by a more complex filter using cross-ref. Are there any examples of other filters that use cross-ref?

I'll eventually want to get Bootstrap popovers working for real because the above doesn't look nice + it has a noticeable delay.

I think I satisfy the requirements and am pattern matching as much as I can to this hover example, with no success.

[jmhimara]

Any updates on this feature?

I know it can be achieved with HTML+CSS+JS: https://stackoverflow.com/questions/23251569/preview-page-on-link-hover
but not sure how to incorporate in all links in Quarto.

[mcanouil]

If there are some updates to announce, they will be (i.e., also if it's ongoing an issue will be open from this discussion and closed when completed).
In the meantime, either be patient or try to implement yourself this, following the few hints from the thread.

[snhansen]

It seems to have been implemented in the pre-release as per "Add support for showing cross reference contents on hover (use crossrefs-hover: false to disable). I had it working with an earlier release (1.4.25) but as of 1.4.84 it doesn't work for me anymore.

[dragonstyle]

I'm not aware of Quarto supporting link previewing of arbitrary links (we should support previewing of citations, footnotes, and cross references).