Placement must not obscure adjacent vertical text or interrupt the reading flow. Left placement follows reading direction; below placement follows screen geometry.

Placement comparison

1글씨를 세로로 쓰는 것을 세로쓰기라 한다

2전통적으로 한국어와 중국어가 세로로 쓰였다

3죽간을 쓰던 때부터 세로로 써 왔다

Hover a verse reference. Tooltip is vertical · it matches the reading axis it annotates.

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

Accessibility

role='tooltip'. aria-describedby on trigger. Not used for required information. Keyboard accessible via focus.

Open question

When a vertical column is at the leftmost edge of the viewport, where does a left-placed tooltip go? Smart collision detection for vertical baselines is unsolved.

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