2nd/10_Wiki/Topic_CSS/CSS_Tooltips.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-tooltips	CSS Tooltips	Frontend	draft	conceptual		tooltip CSS tooltip hover tooltip tooltiptext hover hint info tooltip		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools tooltip hover	https://www.w3schools.com/css/css_tooltip.asp

CSS Tooltips

🎯 한 줄 통찰 (One-line insight)

A CSS tooltip shows extra information about an element when the user moves the mouse pointer over it, built from a hidden, absolutely-positioned text box that is revealed on :hover. [S1]

🧠 핵심 개념 (Core concepts)

• Purpose — a tooltip specifies extra information about something when the user hovers the mouse pointer over an element. [S1]
• Two-element structure — a container element (class tooltip) wraps the trigger text and a nested element (class tooltiptext) that holds the tooltip text. [S1]
• Hidden by default — the tooltip text starts with visibility: hidden and becomes visible only on hover of the container. [S1]
• Positioning context — the container is position: relative so the absolutely-positioned tooltip text is placed relative to it. [S1]
• Stacking — z-index: 1 keeps the tooltip above other content. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Hover-reveal pattern — hide an element, then flip it to visible via a descendant selector triggered by the parent's :hover state (.tooltip:hover .tooltiptext). [S1]
• Directional placement — the same tooltip text box can be moved right, left, above, or below the trigger by switching which offset properties (left/right/top/bottom) and centering margins are set. [S1]
• Fade-in via opacity transition — instead of toggling visibility instantly, animate opacity from 0 to 1 with a transition for a smooth appearance. [S1]

📖 세부 내용 (Details)

What is a CSS tooltip? A CSS tooltip is used to specify extra information about something when the user moves the mouse pointer over an element. [S1]

Basic tooltip The container uses position: relative and display: inline-block; the tooltip text is hidden and absolutely positioned, and a hover rule on the container makes it visible. [S1]

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Positioning the tooltip By adding offset properties to the .tooltiptext rule, the tooltip is moved to the right, left, top, or bottom of the trigger. The grounded offset values from the source are: [S1]

Direction	Offset properties
Right	left: 105%; top: -5px;
Left	right: 105%; top: -5px;
Top	bottom: 100%; left: 50%; margin-left: -65px;
Bottom	top: 100%; left: 50%; margin-left: -65px;

For the top and bottom variants, left: 50% plus a negative margin-left of half the tooltip width (-65px for a 130px-wide box) horizontally centers the tooltip over the trigger. [S1]

Fade-in animation To fade the tooltip in instead of showing it instantly, start the text at opacity: 0, add a transition on opacity, and raise it to 1 on hover. This creates a 2-second fade from invisible to fully visible. [S1]

.tooltiptext {
  opacity: 0;
  transition: opacity 2s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

🛠️ 적용 사례 (Applied in summary)

The tutorial's own example — a .tooltip container with a nested .tooltiptext element revealed on hover — is the canonical applied case. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Hover-reveal tooltip skeleton (language: CSS):

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Directional placement (right of the trigger):

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.89
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Tooltip Arrows, CSS Position, CSS Visibility, CSS Transitions
• 참조 맥락: Referenced whenever a hover hint or extra-information popup is needed on a UI element.

📚 출처 (Sources)

• [S1] W3Schools — CSS Tooltips — https://www.w3schools.com/css/css_tooltip.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Tooltips" page (Astra wiki-curation, P-Reinforce v3.1 format).