728x90
툴팁이란?
해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과
생각보다 툴팁을 사용할 일이 많은데 따로 js 없이 순수하게 툴팁을 사용해보자
tailwind를 이용한 tooltip 예제
<div class="relative group">
<img :src="require('@/assets/icons/ico_report_problem.svg')"
class="w-[20px] h-[20px] cursor-pointer"
alt="problem" />
<div class=" group-hover:flex hidden hover:flex flex-col absolute top-[-150%] left-[50%] translate-x-[-50%] items-center justify-center text-center z-[20]">
<div class="bg-[rgba(0,0,0,0.7)] text-white w-[140px] p-[8px] rounded-[6px] ">Tooltip!</div>
<div class="h-0 w-0" style="border-bottom: 5px solid transparent;border-top: 5px solid rgba(0,0,0,0.7);border-left: 5px solid transparent;border-right: 5px solid transparent;" />
</div>
</div>
🤚tailwind에서 부모 hover시 자식 엘리먼트에게 무언가 옵션을 주고 싶다면?
1. 부모요소에 group 클래스를 추가
2. 자식 요소에 group-hover:flex 로 hover 관련 옵션을 추가
이렇게 하면 끗!
728x90
'WEB > CSS' 카테고리의 다른 글
| input[type=date] placeholder 적용하기 (0) | 2022.12.12 |
|---|---|
| flex 이용해서 가로 스크롤 만들기 (0) | 2022.05.03 |
| 수평 스크롤 만들려고 float left 하고 overflow auto 했는데, 스크롤은 안생기고 아래로 내려갈때?? (0) | 2022.02.03 |
| html button default style 지우기 (0) | 2022.01.27 |
| scroll css custom (0) | 2021.05.24 |