Footnotes and Tooltips

This seems like a great tutorial on how to add footnotes to your website and have them be accessible: https://www.sitepoint.com/accessible-footnotes-css/ <https://www.sitepoint.com/accessible-footnotes-css/>

However, my client has requested that they also have a hoverability/tooltip aspect to them. Where you can hover or keyboard tab to the footnote, and it displays the footnote on the screen in context of the content you’re reading. Sara Soueidn had this great write up about trying to achieve tooltips without javascript… but in the end determined that, to do it well, you really do need javascript: https://www.sarasoueidan.com/blog/accessible-tooltips/ <https://www.sarasoueidan.com/blog/accessible-tooltips/>

Does anyone have a complete solution (or guidance) for footnotes + hover that is considered accessible?

Thanks,
Jeana


Jeana Clark
Creative Director

Tel: 847.607.8577
jclark@veritashealth.com



 <https://www.veritashealth.com/> <https://www.veritashealth.com/>

Spine-health.com <https://www.spine-health.com/> | Arthritis-health.com <https://www.arthritis-health.com/>
Sports-health.com <https://www.sports-health.com/> | Pain-health.com <https://www.pain-health.com/>


*** CONFIDENTIALITY NOTICE*** This message and any included attachments are from Veritas Health, LLC (owner and operator of Spine-health.com, Arthritis-health.com, Sports-health.com and Pain-health.com) and are intended for the addressee only. The contents in this message may contain confidential information belonging to the sender that is legally privileged. Unauthorized forwarding, printing, copying, distribution, or use of such information is strictly prohibited and may be unlawful. If you are not the addressee, please promptly delete this message and notify the sender of the delivery error by e-mail or contact the Veritas Health, LLC at admin@veritashealth.com. Veritas Health reserves the right to view all communications into and out of the company and senders shall have no expectation of privacy.