{"id":21817878,"url":"https://github.com/thawkin3/accessible-tooltips","last_synced_at":"2025-03-21T10:23:34.083Z","repository":{"id":96052699,"uuid":"459751745","full_name":"thawkin3/accessible-tooltips","owner":"thawkin3","description":"This project is meant to teach software engineers how to create accessible tooltips in React. It includes good examples and bad examples.","archived":false,"fork":false,"pushed_at":"2022-02-28T03:59:43.000Z","size":1489,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T06:44:45.980Z","etag":null,"topics":["a11y","accessibility","javascript","react","tooltips","tutorial"],"latest_commit_sha":null,"homepage":"http://tylerhawkins.info/accessible-tooltips/build/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thawkin3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-15T21:13:35.000Z","updated_at":"2022-02-16T18:01:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"823e4cc8-6488-436f-91e6-3819797ad19e","html_url":"https://github.com/thawkin3/accessible-tooltips","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thawkin3%2Faccessible-tooltips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thawkin3%2Faccessible-tooltips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thawkin3%2Faccessible-tooltips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thawkin3%2Faccessible-tooltips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thawkin3","download_url":"https://codeload.github.com/thawkin3/accessible-tooltips/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244776349,"owners_count":20508507,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","javascript","react","tooltips","tutorial"],"created_at":"2024-11-27T15:48:53.594Z","updated_at":"2025-03-21T10:23:34.028Z","avatar_url":"https://github.com/thawkin3.png","language":"JavaScript","readme":"# Accessible Tooltips\n\nThis 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.](http://tylerhawkins.info/accessible-tooltips/build/)\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Key Takeaways\n\n1. There are many different ways that tooltips can be used! Be sure to think about your use case before implementing a solution.\n2. Don't use the \u003ccode\u003etitle\u003c/code\u003e attribute for tooltips.\n3. In general, tooltips should contain short, non-essential, supplemental content.\n4. Short tooltips may appear on hover/focus or on click/keypress. That feels like a design preference decision.\n5. 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.\n6. If the tooltip has interactive content, it should be treated like a modal, regardless of length.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n- `build`: Builds the app\n- `eject`: Ejects the app from using react-scripts\n- `format`: Formats the code using Prettier\n- `format-watch`: Formats the code using Prettier in watch mode\n- `start`: Starts the app in development mode\n- `test`: Runs the tests in watch mode\n\n## Resources\n\n- [Inclusive Components - Tooltips and Toggletips](https://inclusive-components.design/tooltips-toggletips/)\n- [SVGs and Title Attributes](http://web-accessibility.carnegiemuseums.org/code/svg/)\n- [Problems with Using the Title Attribute](https://www.tpgi.com/using-the-html-title-attribute-updated/)\n- [Use of the Title Attribute is Officially Discouraged](https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute)\n- [MDN - role=\"tooltip\"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role)\n- [Tooltips in the Time of WCAG 2.1](https://sarahmhigley.com/writing/tooltips-in-wcag-21/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthawkin3%2Faccessible-tooltips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthawkin3%2Faccessible-tooltips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthawkin3%2Faccessible-tooltips/lists"}