Controlling tooltips & pop-up menus using compound components in React
Hiding further information behind an interaction with an icon, button, or text is a good way of making your interface clean and tidy. This is where tooltips and pop-up menus come into play.
0:00 Introduction
1:22 Creating a modal
17:06 Styling a modal
25:17 Creating a tooltip
28:11 Styling a tooltip
29:38 Building out a tooltip
37:08 Positioning a tooltip
43:45 Testing a tooltip performance
See the full GitHub repo: https://github.com/karlhadwen/tooltip...
Read more about tooltips: https://blog.logrocket.com/controllin...
If you want to find out more about getting a free trial, click here: https://logrocket.com/?yt51
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Try it for free: https://logrocket.com/signup/