In Quarto, is it possible to show arbitrary text on hover?

  Kiến thức lập trình

I work on a Quarto html document and I have a list of definitions. In addition to the in-text definition, I would like to show a box with the definition on hover so that the reader does not have to navigate the document to access the definition.

In know that the YAML option crossrefs-hover: true allows to show a box with the content of a cross-reference to a section or a citation (if a .bib file is supplied to the bibliography argument in YAML) (example below).

Something close to what I wish is achieved by adding footnotes which can also be displayed on hover with footnote-hover: true (see example below). The major drawbacks to this method are:

  • The definition is supplied just after the word in the qmd, which makes it difficult to read when definitions are long. Since the definition is already shown in-text, it would be more convenient to refer to it like a section, figure or table.
  • Some terms with definitions to be displayed are used many times, so it is very inefficient to paste the definition each time the word is used.
  • The definition is shown when hovering on the footnote number and not the word itself (like for crossrefs-hover), which is not desirable as some definitions apply to a group of words.

My question is tehrefore : How to show arbitrary text (from somewhere else in the document) on hovering specific terms ?

Below are the different methods I found, none of which is perfect.

---
format: 
  html:
    crossrefs-hover: true
    footnote-hover: true
---

# Definitions {#sec-FirstSection}

## Term 1

Example of definition for term 1.

## Term 2 {#sec-term2}

Example of definition for term 2.

# Other section

- "See @sec-FirstSection": this method shows the section, but not the term in-text.

- "Definition for term 1^[Example of definition for term 1]": this method shows the definition as desired but is fairly inconvenient.

- "Definition for [term 2](#sec-term2)": this method creates a hyperlink to the definition, which is great to refer to it multiple times, but does not show any text on hover.

I need something in-between those methods. Do you see any workaround ?

LEAVE A COMMENT