메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

툴팁 구성 요소

마지막 업데이트:

상단, 하단, 왼쪽 및 오른쪽 배치가 포함된 CSS 전용 Tailwind CSS 도구 설명입니다. 색상 변형, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

도구 설명 구성 요소는 사용자가 요소 위로 마우스를 가져가거나 요소에 초점을 맞추면 추가 정보를 표시합니다. 의미론적 HTML 속성과 CSS로 구축된 도구 설명은 인터페이스를 복잡하게 하지 않고 상황별 도움말을 제공하여 사용자 경험을 향상시킵니다. Frutjam 툴팁 시스템은 원활한 정보 검색을 위해 다양한 위치, 사용자 정의 콘텐츠 및 부드러운 애니메이션을 지원합니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

참고: 도구 설명은 터치/휴대기기에서는 사용할 수 없습니다인 :hover 및 :focus를 사용합니다. 모바일 중심 레이아웃의 경우 반응형 변형 lg:tooltip을 사용하면 툴팁이 데스크톱(대형 화면 이상)에서만 활성화됩니다. 작은 화면에서는 팝오버 또는 모달과 같은 다른 공개 패턴을 ​​사용하는 것이 좋습니다.

수업 유형 설명
tooltip베이스마우스 오버/포커스 시 data-tip 콘텐츠를 표시하는 래퍼
tooltip-content수정자도구 설명 풍선 내부의 사용자 정의 HTML 콘텐츠
tooltip-top수정자트리거 위에서 열립니다(기본값)
tooltip-bottom수정자트리거 아래에서 열립니다.
tooltip-left수정자방아쇠 왼쪽으로 열립니다
tooltip-right수정자방아쇠 오른쪽에 열립니다.
tooltip-start수정자논리적 시작 측으로 열립니다.
tooltip-end수정자논리적 끝 측으로 열립니다.
tooltip-primary색상기본 테마 색상 풍선
tooltip-secondary색상보조 테마 색상 버블
tooltip-accent색상악센트 테마 색상 버블
tooltip-neutral색상중립 테마 색상 버블
tooltip-info색상정보 의미 색상 버블
tooltip-success색상성공 의미 색상 버블
tooltip-warning색상경고 의미 색상 버블
tooltip-error색상오류 의미 색상 버블

툴팁

1
2
3
<div class="tooltip" data-tip="Tooltip">
   <button class="btn">Hover me</button>
</div>

1
2
3
<div className="tooltip" data-tip="Tooltip">
   <button className="btn">Hover me</button>
</div>

사용자 정의 도구 설명 콘텐츠

html 
1
2
3
4
5
6
7
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>

아이콘이 포함된 도구 설명

html 
1
2
3
4
5
6
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>

강제 열기 도구 설명

html 
1
2
3
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>

도구 설명 위치 지정 옵션

최상위 배치

html 
1
2
3
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>

올바른 배치

html 
1
2
3
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>

배치 종료

html 
1
2
3
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>

하단 배치

html 
1
2
3
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>

왼쪽 배치

html 
1
2
3
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>

배치 시작

html 
1
2
3
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>

도구 설명 색상 변형

원색

html 
1
2
3
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>

보조 색상

html 
1
2
3
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>

악센트 색상

html 
1
2
3
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>

정보 색상

html 
1
2
3
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>

성공 색상

html 
1
2
3
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>

경고 색상

html 
1
2
3
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>

오류 색상

html 
1
2
3
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>

뉴트럴 컬러

html 
1
2
3
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>

반응형 툴팁

lg:tooltip을 사용하여 대형 화면에만 표시

html 
1
2
3
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>

JS 및 반응 도우미

frutjam/js의 createTooltip 또는 frutjam/react의 useTooltip을 사용하여 프로그래밍 방식으로 툴팁을 표시하거나 숨길 수 있습니다. 둘러보기나 트리거된 도움말 텍스트에 유용합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-4">
  <button class="btn btn-sm" id="tip-show">Show</button>
  <button class="btn btn-sm" id="tip-hide">Hide</button>
  <button class="btn btn-sm" id="tip-toggle">Toggle</button>
</div>
<div class="tooltip" data-tip="Programmatic tooltip" id="js-tooltip">
  <button class="btn">Target</button>
</div>
<script type="module">
  import { createTooltip } from 'frutjam/js'
  const tip = createTooltip(document.getElementById('js-tooltip'))
  document.getElementById('tip-show').onclick = () => tip.show()
  document.getElementById('tip-hide').onclick = () => tip.hide()
  document.getElementById('tip-toggle').onclick = () => tip.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useTooltip } from 'frutjam/react'

export default function TooltipDemo() {
  const tooltip = useTooltip()
  return (
    <>
      <div className="flex gap-2 mb-4">
        <button className="btn btn-sm" onClick={tooltip.show}>Show</button>
        <button className="btn btn-sm" onClick={tooltip.hide}>Hide</button>
        <button className="btn btn-sm" onClick={tooltip.toggle}>Toggle</button>
      </div>
      <div ref={tooltip.ref} className="tooltip" data-tip="Programmatic tooltip">
        <button className="btn">Target</button>
      </div>
    </>
  )
}

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 툴팁 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요