반응형
CSS 로 툴팁을 만들어보자. 여태까지 툴팁을 두어번정도 만들어봤다.
텍스트가 들어가는 말풍선 부분을 만들기는 쉬운데, 삼각형 화살표를 만들기가 조금 까다롭다.
그래서 기록해본다.
(미래의 나는 여전히 해멜 것을 알기에... )
결과화면 미리보기
아래처럼 배경색이 들어간 툴팁을 만들어 보자.
JavaScript - CSS 툴팁 삼각형 화살표 만들기
HTML
<div className="tooltip"> ! 툴팁입니다 !</div>
CSS
가상요소인 after 속성을 이용해 삼각형 부분을 표현하였다
.tooltip { // 몸통 부분
background-color: #7689fd;
border-radius: 6px;
color: #fff;
font-size: 12px;
font-weight: 500;
height: 31px;
letter-spacing: -0.25px;
margin-top: 6.8px;
padding: 5px 36.5px 5px 11px;
}
.tooltip::after { // 삼각형 부분
border-bottom: 8px solid #7689fd;
border-left: 7px solid white;
border-right: 7px solid white;
content: "";
height: 0;
left: 21%;
position: absolute;
top: 35%;
width: 0;
}
결과 화면
- 아주 잘 만들어졌다!
반응형
'JavaScript' 카테고리의 다른 글
JavaScript - Break문 vs Continue문 (0) | 2021.10.14 |
---|---|
CSS - 테두리가 있는 툴팁(말풍선) 만들기 (0) | 2021.10.01 |
CSS - input 체크박스 테두리 스타일 변경하기 (0) | 2021.09.29 |
JavaScript - split()으로 문자열 자르기 (파일명에서 확장자만 따로 분리하기) (0) | 2021.09.28 |
CSS - 텍스트가 넘칠때 생략하기 (말줄임) (0) | 2021.09.13 |
댓글