[HTML] 툴팁(Tooltip) 만들기

 

HTML의 속성을 이용하여 툴팁을 생성하는 방법을 알아보도록 하겠습니다. 

 

 

사용자가 웹브라우저의 이미지나 텍스트에 마우스를 가져다 대면,
그에 대한 설명이 말풍선 형태로 뜨는 것을 Tooltip(툴팁)이라고 합니다.

 

툴팁(Tooltip) 만들기

툴팁은 간단하게 HTML의 속성을 이용해서 만들어 줄수도 있고,
CSS를 이용해서 만들어 줄 수도 있습니다.
여기서는 간단히 HTML의 속성을 이용해서 툴팁을 만들어 보도록 하겠습니다.

 

텍스트, 링크에 Tooltip 만들기

See the Pen tooltip by anna (@hianna) on CodePen.

 

텍스트나 링크에 Tooltip을 만들기 위해서는 title이라는 속성을 이용합니다.
링크에 링크에 대한 Tooltip을 만들기 위해서도 title이라는 속성을 사용합니다.

 

 

이미지에 Tooltip 만들기

See the Pen tooltip by anna (@hianna) on CodePen.

 

이미지에 Tooltip을 만들기 위해서도 title이라는 속성을 사용하면 됩니다.


웹브라우저에 나오는 어떤 것에 보조적인 설명을 붙일 때 유용한
Tooltip을 추가하는 방법을 알아보았습니다.