loading words...

Feb 27, 2019 08:38:54

react-tooltips

by @swizecteller | 224 words | 🐣 | 105💌

Swizec Teller

Current day streak: 0🐣
Total posts: 105💌
Total words: 29304 (117 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

https://react-tooltip.netlify.com/

---

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