Popover
Term Underline
A term explained inside the text: the word carries a dotted underline and stays in the line, while the tooltip floats above without shifting anything.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the surrounding copy through before and after
- the word itself through term and the explanation through definition
- the paragraph typeface through the --vibeui-tooltip-008-font variable
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/tooltip-008?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Tooltip008
before="We are billed on the "
term="95th percentile"
definition="The top five percent of samples are dropped."
after=", so the nightly backup does not affect the bill."
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Term
term· default: 95th percentile- Explanation
definition· default: The top five percent of the month's samples are dropped and the bill uses the next value.- Background
background· default: theme colour
More in Popover
FAQ
- How do I add Term Underline with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Term Underline depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Term Underline?
- Adapt: the surrounding copy through before and after; the word itself through term and the explanation through definition; the paragraph typeface through the --vibeui-tooltip-008-font variable. Keep as installed: the local --vibeui-tooltip-008-* palette — do not swap it for your theme tokens; the term as an inline element: a button or link mid-paragraph breaks the setting; tabIndex=0 together with aria-describedby — otherwise the explanation is unreachable by keyboard.
- Is Term Underline free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/tooltip-008.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
The component is self-contained: one file, no dependencies, its own palette in local variables --vibeui-tooltip-008-*. It is a server component: the opening rests on :hover and :focus-visible of the word itself. The term stays an inline element with tabIndex=0 — not a button and not a link, so the setting is not broken, yet it can be reached by keyboard focus. The tooltip is set in a sans-serif face inside a serif paragraph: that is what makes it read as an aside rather than part of the text. The dotted rule is made with the text-decoration property rather than a border.
Tags
- tooltip
- glossary
- inline
- typography
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…