Sidebar Hover Tooltips

Out of the box, Docusaurus's classic theme sets the hover tooltip (title attribute) of every sidebar item to the item's own label — hovering "GForms PoC" would just show "GForms PoC" again. This site overrides that so any sidebar item can declare its own hover text.

How to use it

Doc pages

Add sidebar_custom_props.tooltip to the doc's frontmatter:

---
sidebar_label: GForms PoC
sidebar_custom_props:
  tooltip: GForms Proof of Concept
---

The sidebar shows GForms PoC; hovering it shows GForms Proof of Concept.

Categories

Add customProps.tooltip to the folder's _category_.json:

{
  "label": "Documentation",
  "position": 8,
  "collapsed": true,
  "customProps": {
    "tooltip": "Documentation (Docusaurus)"
  }
}

If no tooltip is declared, the hover text falls back to the label — exactly the stock Docusaurus behaviour. No other item is affected.

Live examples

Sidebar item	Kind	Hover text	Declared in
GForms PoC	doc	GForms Proof of Concept	docs/dev/gforms/gformsPoC.md frontmatter
Infrastructure	category	Infrastructure details	docs/dev/infrastructure/_category_.json
Documentation	category	Documentation (Docusaurus)	docs/dev/documentation/_category_.json
Sidebar Tooltips	doc	How to override sidebar hover text	this file's frontmatter

How it works

The classic theme hard-codes <span title={label}> inside its sidebar item components, so the override is implemented as two ejected (swizzled) components in website/src/theme/:

Component	Renders	File
DocSidebarItem/Link	doc links	website/src/theme/DocSidebarItem/Link/index.tsx
DocSidebarItem/Category	collapsible categories	website/src/theme/DocSidebarItem/Category/index.tsx

Both are verbatim copies of the @docusaurus/theme-classic originals with a single change: the label span's title becomes

const tooltip =
  typeof item.customProps?.tooltip === "string"
    ? item.customProps.tooltip
    : label;

Docusaurus delivers sidebar_custom_props (doc frontmatter) and customProps (_category_.json) to the components as item.customProps, so no further plumbing is needed.

Maintenance notes

• Upgrades: ejected components do not receive upstream updates. After a major @docusaurus/theme-classic bump, diff the two files against node_modules/@docusaurus/theme-classic/lib/theme/DocSidebarItem/{Link,Category}/index.js and re-apply the tooltip change if upstream moved.
• Dev server: newly created files under website/src/theme/ are only registered in the @theme alias map at startup — restart npm run start:dev after adding a swizzled component. Edits to existing ones hot-reload normally.
• The accompanying styles.module.css files next to each ejected component are unchanged copies of the originals (CSS modules are resolved relative to the component, so they must be ejected together).