CSS - 테두리가 있는 툴팁(말풍선) 만들기

 

 

요즘 새발자는 CSS 를 열심히 연마하고 있다. 오늘은 테두리가 있는 툴팁을 만들어 볼 것이다.

테두리가 없는 툴팁은 비교적 만들기 쉬운 편인데, 테두리가 있는 툴팁은 조금 까다로웠다.

그래서 잊지 않도록 기록을 남겨본다.

 

---

CSS - 테두리가 있는 툴팁(말풍선) 만들기

 

결과화면 미리보기

하늘색 바탕에 파란색 테두리가 있는 툴팁이 완성되었다.

 

HTML

  <div className="task-tooltip">
    새발자는 오늘도 뚠뚠.. 모두들 화이팅입니다.
  </div>

 

CSS

before 로 삼각형을 after 로 삼각형의 테두리를 만들어주었다.

.task-tooltip {
  background-color: #eef3fd;
  border: #7689fd solid 1px;
  border-radius: 5px;
  color: #505bf0;
  font-size: 12px;
  font-weight: 500;
  height: auto;
  letter-spacing: -0.25px;
  margin-top: 6.8px;
  padding: 5px 11px;
  position: relative;
  width: fit-content;
  z-index: 100;
}

.task-tooltip::after {
  border-color: #eef3fd transparent;
  border-style: solid;
  border-width: 0 6px 8px 6.5px;
  content: '';
  display: block;
  left: 75px;
  position: absolute;
  top: -7px;
  width: 0;
  z-index: 1;
}

.task-tooltip::before {
  border-color: #7689fd transparent;
  border-style: solid;
  border-width: 0 6px 8px 6.5px;
  content: '';
  display: block;
  left: 75px;
  position: absolute;
  top: -8px;
  width: 0;
  z-index: 0;
}