gatsby-theme-brain icon indicating copy to clipboard operation
gatsby-theme-brain copied to clipboard

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

Open YangVincent opened this issue 5 years ago • 1 comments
trafficstars

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?

YangVincent avatar Aug 02 '20 15:08 YangVincent

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

MaggieAppleton avatar Jan 13 '21 13:01 MaggieAppleton