This script creates an accessible tooltip for glossary terms with customizable definitions fetched from a JSON file. The tooltip appears above or below the glossary term based on the available space and includes a delay before displaying. The script also adapts to different document languages.
- Add the
.glossaryclass to any element in your HTML that contains a glossary term. - Add a
data-termattribute to the.glossaryelement with the term as its value. This value will be used to fetch the correct definition from the JSON file. - If you want to use a custom JSON file, add a
data-glossary-fileattribute to the script tag with the JSON file's path as its value. - To display the tooltip in a specific language, set the
langattribute on the<html>element to the desired language code (e.g., "fr" for French).
<html lang="fr">
<head>
<!-- Add the script tag -->
<script type="module" src="path/to/glossary.js" data-glossary-file="custom_glossary.txt"></script>
</head>
<body>
<p>
This is an example sentence with a
<span class="glossary" data-term="example">glossary term</span>.
</p>
</body>
</html>The JSON file should contain an array of objects with the following structure:
[
{
"term": "example",
"definition": "This is the definition of the example term."
},
{
"term": "another-term",
"definition": "This is the definition of another term."
}
]The script includes a CSS block that can be customized to style the tooltip, glossary terms, and tooltip container. To change the appearance, edit the styleElement.innerHTML string in the script.
The script sets a tabindex attribute to every .glossary element, allowing keyboard navigation. It also includes the appropriate ARIA attributes for better screen reader support.