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 FERPAFamily 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): FERPAFamily Educational Rights and Privacy Act · Below: WCAGWeb 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: APIApplication Programming Interface · Without: APIApplication Programming Interface

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

Glossary

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

Use your NetIDNorthwestern Network Identification, used for authentication to log in via SSOSingle 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 credentialsNorthwestern 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.

noteWeb Content Accessibility Guidelines 2.2 · tipAutomated test results from the CI pipeline · cautionFederal law protecting student education records · dangerOutlines 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.

purpleNorthwestern's primary brand color · tealCustom teal accent · darkDark 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

#tipstring

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

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

Position relative to the trigger.

#underlinebooleantrue

Dotted underline on the trigger text.

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

Semantic color variant matching Starlight’s Aside types.

#colorstring

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

<Glossary> Props

Implementation: Glossary.astro

#termsRequiredRecord<string, string>

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

<Term> Props

Implementation: Term.astro

#ofRequiredstring

Key matching a <Glossary> entry.

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

Position relative to the trigger.

#underlinebooleantrue

Dotted underline on the trigger text.

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

Semantic color variant, passed through to Tooltip.

#colorstring

Custom background color, passed through to Tooltip.