Microlink Hover: Get URL previews on hover

[Kikobeats]

The current preview card needs to place it as part of the markup of the HTML.

In some scenario, this is not possible because the HTML markup is not possible to modify.

However, a smart approach could place the card inside a tooltip and reveal it on hover the link, similar how Wikipedia links to another Wikipedia article:

Implementation:

• ⭐ https://github.com/joakin/context-cards
• https://github.com/GoogleChromeLabs/quicklink (load based on viewport)
• https://www.npmjs.com/package/react-hove
• https://nukeop.github.io/react-ui-cards/

Tooltips libraries

• https://github.com/atomiks/tippy.js-react (good, but too heavy)
• https://ui.reach.tech/tooltip

Footnotes libraries

• https://www.cssscript.com/sticky-footnote-generator/
• http://www.bigfootjs.com/

Inspiration

• http://hovercards.com
• https://tympanus.net/Development/ImageRevealHover
• https://joshwcomeau.com

[Kikobeats]

Inspiration:

• https://www.metabomb.net/hearthstone/gameplay-guides/hearthstone-dungeon-run-guide-kobolds-and-catacombs-3#passive

Another approach to ship this, specially focused on mobile experience, is show a banner on the bottom of the website (probably just a one line banner). It will be showed on hover for desktop and on click for mobile

[breadadams]

More inspiration, click the variation buttons on amazon: https://www.amazon.com/Apple-iPhone-Unlocked-Phone-32/dp/B01M1P7JXE

[Kikobeats]

Medium like approach

https://medium.com/@burgos/goodbye-comments-hello-conversations-a64482caea4a

[Kikobeats]

Added new resource inspiration: https://tympanus.net/Development/ImageRevealHover/

[Kikobeats]

See https://hover-react.microlink.io & https://hover-vanilla.microlink.io 🎉