/a11y-tooltips

This plugin was created to help you implement accessible tooltips with minimal work, because everyone is tired of using crappy UI plugins that damage the underlying experience.

Primary LanguageCSSMIT LicenseMIT

Accessible Tooltips

This plugin was converted from a jQuery plugin originally written by @scottohara. You can view the original code in Scott's Accessible Component Library. Pretty much everything is the same, you just don't need jQuery.

It was created to help you implement accessible tooltips with minimal work, because everyone is tired of using crappy UI plugins that damage the underlying experience. Check out the demo

Example HTML You'll Need

<!-- Hover to expose the tooltip -->

<span class="a11y-tip">
  <span class="a11y-tip__trigger">
    Tooltip Trigger span
  </span>

  <span class="a11y-tip__help">
    Tooltip content goes here
  </span>
</span><!--/.a11y-tip-->

<!-- Click to expose the tooltip -->

<span class="a11y-tip a11y-tip--toggle">
  <span class="a11y-tip__trigger">
    Tooltip Toggle Trigger
  </span>

  <span class="a11y-tip__help">
    Tooltip content goes here
  </span>
</span><!--/.a11y-tip-->

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b feature/my-new-feature
  3. Commit your changes: git commit -m 'Added some great feature!'
  4. Push to the branch: git push origin feature/my-new-feature
  5. Submit a pull request

Credits

License

Code and documentation are released under the MIT license.

Browser support

Feature Chrome Firefox Internet Explorer Safari
Basic Support Latest Latest 9+ 5.1+

Chrome and Firefox update too much to go back and test each version, if you need a certain on tested, just let me know. Or if there's a bug somewhere, feel free to file an issue and I'll fix it.

Further Reading