loading words...

Feb 27, 2019 08:38:54


by @swizecteller | 224 words | 🐣 | 116💌

Swizec Teller

Current day streak: 0🐣
Total posts: 116💌
Total words: 32303 (129 pages 📄)

You know when you need tooltips and it smells easy so you do it yourself?

Component to display stuff, some state or context for "Yes tooltip is on", maybe a little React Portaling, and voila a tooltip. 

And then the edge cases start ... #200wordsTIL


I have gone through this spiel and dance more times than I can count. Tooltips are a giant footgun and I fall for it every time.


BUT NOT THIS TIME OH NO! This weekend I built tooltips. Amazing tooltips. Great tooltips. The best tooltips.

I used react-tooltip



react-tooltip is a wonderful little library

You render a tooltip component then use it with a data-tip prop. Just like ye olden days


Notice that children of <ReactTooltip> are just JSX. That means you can make it completely custom like I did. Superb 👌

I even used a CSS Grid on the inside to help with layout


You can re-use a tooltip from as many triggers as you'd like. They all use the same component reducing the amount of DOM nodes. Perfect


Where it gets tricky is if you want custom dynamic tooltip content for each trigger. There's a getContent render prop but it doesn't accept arguments.

Next best thing was to create a bunch of tooltips, give them unique IDs, and trigger that way.

now my dom is slow :/

Originally published at twitter.com

contact: email - twitter / Terms / Privacy