Tooltip

Adds hover definitions to acronyms and technical terms. Hovering or focusing a trigger shows the definition in a floating popup. <Tooltip> handles one-off definitions. <Glossary> + <Term> let you define a term once and reference it by key.

Import

import { Tooltip, Glossary, Term } from "@nu-appdev/northwestern-starlight-theme/components";

Basic Usage

Pass a definition string with the tip prop.

All users must comply with FERPA Family Educational Rights and Privacy Act regulations when handling student records.

<Tooltip tip="Family Educational Rights and Privacy Act">FERPA</Tooltip>

Positioning

Tooltips appear above the trigger by default. Use side="bottom" to position below.

Above (default): FERPA Family Educational Rights and Privacy Act · Below: WCAG Web Content Accessibility Guidelines

<Tooltip tip="Web Content Accessibility Guidelines" side="bottom">WCAG</Tooltip>

Without Underline

Set underline={false} to remove the dotted underline.

With underline: API Application Programming Interface · Without: API Application Programming Interface

<Tooltip tip="Application Programming Interface" underline={false}>API</Tooltip>

Glossary

Define terms once with <Glossary>, reference them with <Term>.

Use your NetID Northwestern Network Identification, used for authentication to log in via SSO Single Sign-On .

<Glossary terms={{
    SSO: "Single Sign-On",
    NetID: "Northwestern Network Identification, used for authentication",
}} />

Use your <Term of="NetID" /> to log in via <Term of="SSO" />.

Custom Trigger Text

<Term> renders the key as trigger text by default. Pass children to override.

Students authenticate with their university credentials Northwestern Network Identification, used for authentication .

<Term of="NetID">university credentials</Term>

Rich Content

Use the tip named slot for HTML/MDX content instead of the tip string prop. The default slot remains the trigger.

FERPA

Family Educational Rights and Privacy Act

<Tooltip>
    FERPA
    <Fragment slot="tip">
        <strong>Family Educational Rights and Privacy Act</strong>
    </Fragment>
</Tooltip>

The tip string prop still works for plain text. The slot supports links, code, emphasis, and multi-line content.

Variants

Semantic variants match Starlight’s Aside types: note, tip, caution, danger.

note Web Content Accessibility Guidelines 2.2 · tip Automated test results from the CI pipeline · caution Federal law protecting student education records · danger Outlines security incident procedures

<Tooltip tip="Explanation here" variant="note">note</Tooltip>
<Tooltip tip="Explanation here" variant="tip">tip</Tooltip>
<Tooltip tip="Explanation here" variant="caution">caution</Tooltip>
<Tooltip tip="Explanation here" variant="danger">danger</Tooltip>

Custom Color

color sets a custom background. Text color is computed at build time with khroma for WCAG contrast.

purple Northwestern's primary brand color · teal Custom teal accent · dark Dark background

<Tooltip tip="Northwestern's primary brand color" color="#4e2a84">purple</Tooltip>
<Tooltip tip="Custom teal accent" color="#7fcecd">teal</Tooltip>
<Tooltip tip="Dark background" color="#1a1a1a">dark</Tooltip>

<Tooltip> Props

Implementation: Tooltip.astro

#tip string

Definition text. Use the tip named slot instead for rich HTML/MDX content.

#side "top" | "bottom" "top"

Position relative to the trigger.

#underline boolean true

Dotted underline on the trigger text.

#variant "note" | "tip" | "caution" | "danger"

Semantic color variant matching Starlight’s Aside types.

#color string

Custom background color. Overrides variant. Text color is auto-computed for WCAG contrast with khroma.

<Glossary> Props

Implementation: Glossary.astro

#terms Required Record<string, string>

Map of term keys to definitions. Place above any <Term> references on the page.

<Term> Props

Implementation: Term.astro

#of Required string

Key matching a <Glossary> entry.

#side "top" | "bottom" "top"

Position relative to the trigger.

#underline boolean true

Dotted underline on the trigger text.

#variant "note" | "tip" | "caution" | "danger"

Semantic color variant, passed through to Tooltip.

#color string

Custom background color, passed through to Tooltip.