Chapter 10. Project: Tooltip component
This chapter covers
- Understanding the project structure and scaffolding
- Building the Tooltip component
When you’re working on websites that have a lot of text, such as Wikipedia, it’s a great idea to allow users to get additional information without losing their position and context. For example, you can give them an extra hint in a box when they hover the cursor (see figure 10.1). This hint hover box is called a tooltip.
React is all about UIs and a better UX, so it’s a good fit for a tooltip implementation. Let’s build a component to display helpful text on a mouse-over event.
There are a few out-of-the-box tooltip solutions, including react-tooltip (www.npmjs.com/package/react-tooltip), but the goal here is to learn about React. Building a tooltip from scratch is a really good exercise. Maybe you’ll use this example in your daily work by making it a part of your app, or extend it into a new open source React component!
The key to creating the Tooltip component is to be able to take any text, hide it with CSS, and make it visible again on mouse-over. You’ll use if/else conditions, JSX, and other programming elements for this project. For the CSS part, you’ll use Twitter Bootstrap classes and a special Twitter Bootstrap theme to make the tooltip look nice in a short amount of time.