adding glossary-style definitions in mdx to my blog

I’ve added a small MDXMDX—Markdown that allows embedded JSX components. component that lets me display glossary-style definitions on hover and focus.

Component code snippet

Below is the code for the <Def> component with styling omitted, styling is used to position and reveal the tooltip:

export default function Definition({ def, term, children }: DefinitionProps) {
  const tooltipId = useId()

  return (
    <span>
      <dfn
        tabIndex={0}
        aria-describedby={tooltipId}
      >
        {children}
      </dfn>
      <span
        id={tooltipId}
        role="tooltip"
      >
        {term ? (
          <>
            <strong>{term}</strong>
            <span>—</span>
            {def}
          </>
        ) : (
          def
        )}
      </span>
    </span>
  )
}

How it works

• Authoring: wrap a term in <Def> and pass the def (and optionally term) props
• Semantics: uses <dfn><dfn>—A semantic HTML element for a definition. with aria-describedby and role="tooltip"
• Interaction: shows the definition on hover and on keyboard focus (Tab)

Conclusion

This small addition improves the user experience by providing quick access to definitions without cluttering the text. I will be updating my previous posts to use this component where appropriate.