this is a test of definition tooltips, and so is this!

you can make definitions with as much content as you like, just style the tooltips so that they have an appropriate maximum width.

believe it or not, you can even make definitions that aren't text! just note that doing so brings its own accessibility concerns.

if you want to try it out on your own site, you can download a copy of this example here!

to use, extract the contents of the zip somewhere on your website, and add the following to any HTML page where you want to use it:

<script src="./definition-tooltip.js" type="module" defer></script>

the script works by taking each <dfn> element in your document and automatically moving the contents of its title attribute into a data-tooltip attribute to be displayed in a definition tooltip when the element is hovered or touched. if JS is not enabled, the title remains as-is, and default tooltips should still appear on desktop.

anything you write in the title attribute will be rendered in the tooltip, even HTML! that's how the "aren't text" definition above works.

the script makes an attempt at keeping things accessible by also automatically copying title contents into the aria-description attribute, to be read by screen readers, and the visual tooltips themselves are hidden from screen readers. if you provide your own aria-description on your definition elements, it will not be overwritten, so if you are including HTML in your <dfn>'s title to make tooltips with fancy graphics, consider adding a plain-text description in aria-description too, so those using screen readers aren't missing out on information.

a definition tooltip using HTML while still maintaining some accessibility could be defined like this:

<dfn title="<div>some cool html here</div>" aria-description="some cool descriptive text here">words with definition</dfn>

have fun!

this tooltip system makes use of the Floating UI JavaScript library to do the heavy lifting of positioning the tooltips. the downloadable zip above includes a version of Floating UI you can host on your own website (to ensure the tooltips always work as long as your site is up) and uses it by default, but definition-tooltip.js includes instructions in case you'd rather use an external host instead.