728x90
반응형
HTML
<span class="bage-08-blu02" data-tooltip="툴팁이 보입니다.">여기에 마우스를 올리세요.</span>
CSS
[class*="bage-08"] {position:relative; border-radius: 11px;padding: 0 10px;height: 22px;;font-size: 12px;line-height: 22px;font-weight: 500;color: #000;}
[class*="bage-08"]:before {display:none; position:absolute; left:0; top:-19px; background-color:white; border:1px solid black; border-radius:2px; width:max-content; padding:0 10px; line-height:20px; font-size:12px; z-index:1;}
[class*="bage-08"]:hover:before {display:block;}
.bage-08-blu02:before {content:attr(data-tooltip); box-shadow:0 0 10px #0066b3; border-color:#0066b3; color:#0066b3;}
728x90
반응형
'프로그래밍' 카테고리의 다른 글
| [Python] 로또 번호를 맞춰 볼까? #2 (0) | 2024.07.22 |
|---|---|
| [Python] 로또 번호를 만들어 볼까? #1 (1) | 2024.07.15 |
| Flowbite Svelte #10 - Svelte와 Vue.js, React.js 비교 (0) | 2024.07.13 |
| Flowbite Svelte #8 - Button Component (0) | 2024.07.11 |
| Flowbite Svelte #5 - Flowbite Svelte 사용 예제 (0) | 2024.07.08 |