tsx
1function Tooltip({ children, content, placement = "left" }) {
2  const [visible, setVisible] = useState(false)
3
4  const positionStyle = {
5    left: {
6      right: "calc(100% + 10px)",
7      top: "50%",
8      transform: "translateY(-50%)",

Source

The exact file npx verticallyworks add tooltip copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * VerticalTooltip · a tooltip that opens along the reading direction.
5 *
6 * In a vertical RTL interface the tooltip's default home is to the LEFT of its
7 * trigger · where reading is headed · with vertical content of its own.
8 * Opening below would break the column it annotates. Shows on hover and on

Guidance

Default to left placement · tooltip appears in the direction reader came from
Keep tooltip width ≤ 240px
Dismiss on Escape and pointer leave with 200ms delay

Don't

Place tooltips below vertical text triggers · they interrupt the column below
Use tooltips for interactive content
Animate tooltips on the reading axis

PreviousHyperlink Treatment Next Sheet

1	function Tooltip({ children, content, placement = "left" }) {
2	const [visible, setVisible] = useState(false)
3
4	const positionStyle = {
5	left: {
6	right: "calc(100% + 10px)",
7	top: "50%",
8	transform: "translateY(-50%)",

1	"use client";
2
3	/**
4	* VerticalTooltip · a tooltip that opens along the reading direction.
5	*
6	* In a vertical RTL interface the tooltip's default home is to the LEFT of its
7	* trigger · where reading is headed · with vertical content of its own.
8	* Opening below would break the column it annotates. Shows on hover and on