CSS사용해서 HTML 툴팁(tooltip) 구현하기

 

 

 

 

 

웹사이트 작업 중 부연설명이 필요한 부분으로 툴팁(tooltip)을 많이 사용한다.
예를 들면 웹페이지에서 단어위에 마우스를 올렸을 때
용어에 대한 부연 설명이 말풍선처럼 나타나는 효과이다.

일반적으로 HTML만 이용해서 툴팁 적용하는 방법은 간단하다.

 

 

1. 기본 HTML을 이용한 툴팁 만들기

 

< HTML >

 

<p>
  프론트 개발자를 위한 웹 언어에는 2가지가 있습니다.
  <span class="tooltip" title="HyperText Markup Language">HTML</span>
  은 웹페이지에 내용을 기술하고 뼈대라고 생각하면 됩니다.
</p>

 

 

 

이렇게하면 브라우저에 맞는 툴팁이 타나난다.

 

 

 

 

---

 

2. CSS를 이용해서 예쁜 툴팁 만들기

 

이런 방법 말고 툴팁을 예쁘게 CSS를 이용해서 꾸미는 방법도 알아보자.

 

 

< HTML >

 

<p>
  프론트 개발자를 위한 웹 언어에는 2가지가 있습니다.<br>
  <span class="tooltip">
  	HTML<span class="tooltip-text">HyperText Markup Language</span>
  </span>은 웹페이지에 내용을 기술하고 뼈대라고 생각하면 됩니다.<br>
  
  <span class="tooltip">
  	CSS<span class="tooltip-text">Cascading Style Sheets</span>
  </span>는 콘텐츠의 모양이나 레이아웃에 사용되는 그림이라고 생각하면 됩니다.
</p>

 

 

 

< CSS >

 

p{line-height: 1.6;}

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

.tooltip-text {
  display: none;	/*평소에 안보여야 하니까 none으로*/
  position: absolute;	/*공중에 띄어져있으니까 absolute*/
  max-width: 200px;
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
  font-size: 0.8em;
  color: white;
  background: #ff44a9;
}

.tooltip:hover .tooltip-text {
  display: block;	/*마우스 올렸을때 나타나도록*/
}

 

 

 

HTML과 CSS를 이용해서 만들면 아래 이미지처럼

마우스 hover 했을때 예쁘게 꾸민 툴팁의 효과를 표현할 수 있다.