This project is meant to teach software engineers how to create accessible tooltips in React. It includes good examples and bad examples. View the demo app here.

This project was bootstrapped with Create React App.

1. There are many different ways that tooltips can be used! Be sure to think about your use case before implementing a solution.
2. Don't use the title attribute for tooltips.
3. In general, tooltips should contain short, non-essential, supplemental content.
4. Short tooltips may appear on hover/focus or on click/keypress. That feels like a design preference decision.
5. In general, long tooltips should be avoided. If you do use a tooltip with lengthy content, it may be a good idea to treat it like a modal.
6. If the tooltip has interactive content, it should be treated like a modal, regardless of length.

In the project directory, you can run:

• build: Builds the app
• eject: Ejects the app from using react-scripts
• format: Formats the code using Prettier
• format-watch: Formats the code using Prettier in watch mode
• start: Starts the app in development mode
• test: Runs the tests in watch mode

• Inclusive Components - Tooltips and Toggletips
• SVGs and Title Attributes
• Problems with Using the Title Attribute
• Use of the Title Attribute is Officially Discouraged
• MDN - role="tooltip"
• Tooltips in the Time of WCAG 2.1