HTML 코드
<div class="wrap">
<button class="tip" data-tip="링크 복사">🔗</button>
<button class="tip show" data-tip="공유하기">↗</button>
</div>
<style>
.wrap{display:flex;gap:16px;padding-top:44px;justify-content:center}
.tip{position:relative;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--bg);font-size:16px;cursor:pointer}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--fg);color:var(--bg);font-size:12px;padding:5px 8px;border-radius:6px;opacity:0;transition:opacity .15s .3s;pointer-events:none}
.tip::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--fg);border-bottom:0;opacity:0;transition:opacity .15s .3s}
.tip:hover::after,.tip:hover::before,.show::after,.show::before{opacity:1}
</style>AI에게 이렇게 요청하세요
아이콘 버튼에 마우스를 올리면 0.3초 뒤 위쪽에 아래 꼬리가 달린 검은 툴팁으로 버튼 이름 보여줘
<div class="wrap">
<button class="tip" data-tip="링크 복사">🔗</button>
<button class="tip show" data-tip="공유하기">↗</button>
</div>
<style>
.wrap{display:flex;gap:16px;padding-top:44px;justify-content:center}
.tip{position:relative;width:38px;height:38px;border-radius:8px;border:1px solid var(--border);background:var(--bg);font-size:16px;cursor:pointer}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--fg);color:var(--bg);font-size:12px;padding:5px 8px;border-radius:6px;opacity:0;transition:opacity .15s .3s;pointer-events:none}
.tip::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--fg);border-bottom:0;opacity:0;transition:opacity .15s .3s}
.tip:hover::after,.tip:hover::before,.show::after,.show::before{opacity:1}
</style>언제 쓰나
아이콘만 있는 버튼의 이름, 약어 풀이처럼 한두 단어짜리 보조 설명.
비슷한 것과 차이
- 클릭해서 열리고 버튼·링크까지 담는 큰 말풍선은 팝오버(Popover)
- 모바일에는 마우스 호버가 없으니 중요한 정보는 툴팁에만 두지 않기