Adding Definition Popups in Ghost Articles

Developer help Routing
1

Hello everyone,

I am currently customizing my Ghost site and I would like to add a specific feature: definition popups in the text. My goal is to allow readers to hover over certain words or phrases to display a definition or explanation without leaving the page.

More specifically, I want to be able to add different definitions in each article. Here are some additional details about what I want to achieve:

  • When a user hovers over a specific word or phrase, a popup (or tooltip) appears with a definition or explanation.
  • The definitions should be customizable individually for each article.
  • Ideally, I would like to manage the definitions from the Ghost dashboard or via the HTML/CSS of each article.
  • I am open to using plugins, JavaScript scripts, or any other method that could simplify the process.

If anyone has implemented something similar or has suggestions on the best way to proceed, I would greatly appreciate your help. Examples of code, links to useful resources, or plugin recommendations would also be very helpful.

Thank you in advance for your assistance!

Best regards,

IMG_0580
IMG_05801290Ă—2796 513 KB

IMG_0581
IMG_05811290Ă—2796 465 KB

2

Have you tried native HTML, using the dfn tag with a title?
<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>

3

Thank you for the suggestion to use the HTML <dfn> tag. It’s a good idea for adding contextual definitions directly into the text. However, I find it not interactive, accessible, or visually appealing enough. I’m looking for a solution that offers a better user experience with more attractive and easy-to-navigate popups. If anyone knows of tools or plugins that could improve this, I’d greatly appreciate your help!

Thanks in advance for your assistance.

4

What about doing your definitions as “footnotes”? You might adapt the approach here?

Note that this is a javascript solution, and will not work for an emailed newsletter (but I’m not sure anything else will either).

1 Like