Does the marker stop being a real footnote link?

No. It keeps href="#note-id" and the note's matching id. With valid client enhancement, activation opens that same note in place; without it the browser follows the normal same-document destination.

Does this replace a long bibliography or source page?

No. It is for a short, nearby plain-text note. Keep full source records and long-form notes on a normal linked destination.

Does it trap focus or use a tooltip role?

No. It is a nonmodal note with a named close button. Escape and Close return focus to the original citation marker.

Text Footnote Leader

Keep a real inline citation link, with its short note visibly tied to the marker.

The archive team followed the same record across three collections¹

and documented its changing context.

Customise

Code

// Keep noteId unique within this page.

<TextFootnoteLeader
  markerLabel="1"
  noteId="source-note"
  note="Example publication details for this citation."
/>

Text Footnote Leader keeps a normal same-document citation anchor and its note in the same reading flow. Activating the marker briefly places that same note beside it and draws a thin leader between the two; closing returns focus to the marker without changing the page's hash or scroll position.

Without JavaScript, with invalid or duplicate destination ids, or when a marker/note is unavailable, the citation stays a regular link with its full note inline. Notes are plain text and limited to 280 characters; longer material belongs in an ordinary linked footnote.

The leader is a finite transform-only decoration. Reduced motion removes its travel, forced colours retain system-colour contrast, and print keeps the note inline while hiding the control and leader.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/text-footnote-leader

Usage

import { TextFootnoteLeader } from "@/components/text-footnote-leader";

export function ResearchSentence() {
  return (
    <p>
      The report compares the same cohort over several seasons
      <TextFootnoteLeader
        markerLabel="1"
        noteId="cohort-source"
        note="Source title, authors and publication details supplied by this essay."
      />
      and records the change in each group.
    </p>
  );
}

Props

Prop	Type	Default	Description
markerLabel	string	required	Short visible citation marker. Blank text keeps the note inline and shows an unavailable marker.
noteId	string	required	Unique same-document note destination id without whitespace. Duplicate or invalid ids keep the note inline and show a configuration message.
note	string	required	Plain-text note up to 280 characters. Missing or longer text is shown inline without enhancement.
className	string	undefined	Additional classes merged onto the inline root.

Customisation

The note uses semantic popover/background, foreground and border tokens. Set the leader ink, opaque surface and reveal duration at the component's own scope:

.article-citation {
  --footnote-leader-ink: var(--primary);
  --footnote-leader-surface: var(--popover);
  --footnote-leader-duration: 160ms;
}

Frequently asked questions

Does the marker stop being a real footnote link?: No. It keeps href="#note-id" and the note's matching id. With valid client enhancement, activation opens that same note in place; without it the browser follows the normal same-document destination.
Does this replace a long bibliography or source page?: No. It is for a short, nearby plain-text note. Keep full source records and long-form notes on a normal linked destination.
Does it trap focus or use a tooltip role?: No. It is a nonmodal note with a named close button. Escape and Close return focus to the original citation marker.

Related components

Keep supporting sources close to the wordsExplore text components for considered editorial reading experiences.Explore Template Empire