CSS - 툴팁 삼각형 화살표 만들기

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;
}

 

결과 화면

- 아주 잘 만들어졌다!