search

aengusmcmillin / gatsby-theme-brain

279 stars 28 forks source link

What would it take to create a mouseover preview like https://notes.azlen.me/g3tibyfv/? #41

Open YangVincent opened 4 years ago

YangVincent commented 4 years ago

I'm looking to use (or create) this type of mouseover preview over links, where you can see the full content layout (bullets, images, etc). I'm fairly new to React; what would this feature probably entail?

MaggieAppleton commented 3 years ago

I managed to do this using Tippy.js and component shadowing.

You can take a look at my implementation on my website repo: https://github.com/MaggieAppleton/maggieappleton.com

Relevant files to checkout: https://github.com/MaggieAppleton/maggieappleton.com/tree/master/src/%40aengusm/gatsby-theme-brain/templates https://github.com/MaggieAppleton/maggieappleton.com/blob/master/src/%40aengusm/gatsby-theme-brain/components/BrainNote.js https://github.com/MaggieAppleton/maggieappleton.com/blob/master/src/components/mdx/TipLink.js https://github.com/MaggieAppleton/maggieappleton.com/blob/master/src/components/mdx/Tooltip.js