Using Tippyjs to Implement Link Previews

On May 16, 2020 I implemented link previews on the notes section of my website. Hopefully you can see what I mean just by hovering over those links. I did this using TippyJS and modifying the query on theprogramming.language.js.gatsby.gatsby-theme-brain package I used at the time for my notes.

Since then I shifted how I take my notes to using tool.dendron Check out my note โ€” why I switched to Dendron

In addition to regular mdx data gatsby-theme-brain allows you to query the InboundReferenceNotes - the notes that reference this note - and the OutboundReferenceNotes - the notes that this note references. This means that in order to get link previews working I just made sure that I queried the childMdx property for both Inbound and Outbound Notes and grabbed the body property from childMdx which contains Markdown that is ready to be rendered with an MDXRenderer. Then I had to pass all of the OutboundReferenceNote information - slug, title, and body - to the MDXcomponent I used to parse my links.

In my mdx-components-with-previews.js file I added logic that checks each link and for any link to an OutboundReferenceNote, it substitutes the regular link with a Tippy tooltip that has as an MDXRenderer wrapped around the markdown body as its tooltip.

The tricky thing is that you can get into an infinite loop of tooltips in densely linked notes. What I ended up doing to get around this is using a different MdxComponent provider for the tooltips then for the rest of my notes. This makes sure that my tooltips donโ€™t go on to generate more tooltips.

Credit

  • I looked at Ian Jonesโ€˜s notes site and Aravind Ballaโ€˜s notes site for some inspiration on how to pass more information. Aravind Bellaโ€™s notes site was particularly helpful since he was passing
  • I borrowed my Tooltip setup from Maggie Appletonโ€˜s website.

Contact

Content is copyrighted 2019-2023 ยฉ D.S. Chapman. This site was built using GatsbyJS. Code for this website is open source and available on Github