[HTML] 스크립트 없이 CSS로 툴팁 띄우기

<span title="제목 자세히...">제목</span>

간단하게 이런식으로 태그를 쓰면

마우스를 몇초 가져다 대면 "제목 자세히..." 문구가 풍선 아이콘으로 나타난다

 

그런데 1-2초 기다리는게 슬슬 짜증이 나기 시작한다

마우스만 대면 바로 튀어나오게 설정하되

 

자바스크립트 안쓰는 방법을 찾아보자..

 

<span class='tooltip'>
제목
	<span class='tooltip-text'> 제목 자세히... </span>
</span>

조금 풀어쓰기는 했지만 중간에 클래스가 포함된 내역이 추가된다

 

CSS 부분은 이렇게 생성한다

 

.tooltip {
  display: inline-block;
  color: deeppink;
  font-weight: bold;
}

.tooltip-text {
  display: none;
  position: absolute;
  width:400px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 0.8em;
  color: white;
  background: deeppink;
  margin-top:-40px;
  left:0px;
}

.tooltip:hover .tooltip-text {
  display: block;
}

중간 중간 css 설정은 입맛에 맞게 수정해 주면 된다

 

중요한 부분한 tooltip:hover 부분이 있어야

위 CSS 클래스가 동작한다.

 

1원짜리 팁!

 

출처 : https://www.daleseo.com/css-position-absolute-tooltip/

CSS의 absolute position으로 툴팁(tooltip) 구현하기