[HTML/CSS] 툴팁 사용 방법

HTML/CSS 툴팁 사용하는 방법

 

툴팁은 보통 컨텐츠 영역의 공간이 부족하여 객체에 오버 등을 이용하여 부연설명을 하기 위한 공간을 말합니다.

장점으로는 페이지의 가독성을 더 좋게 하여 사용자가 이해하기 쉬운 페이지를 만들 수 있습니다.

 

[툴팁의 종류]

1. title 태그를 사용하여 구현

2. HTML/CSS를 사용하여 구현

 

 

title 태그를 사용하여 툴팁 구현

See the Pen [툴팁 예제] 1. title을 사용하기 by solutiona80 (@solutiona80) on CodePen.

 

 

 

예제를 보면 pink 색 박스 영역이 되어 있는 곳에 마우스를 오버하면 툴팁이 생기는 거 볼 수 있습니다.

 

- 장점 -

사용 방법이 쉽다.(예제에 보면 단순하게 div 태그에 속성으로 title=''툴팁 예제입니다." 라고 title 속성을 사용하면 됩니다.)

 

- 단점 -

브라우저에서 제공하는 툴팁이라 디자인을 할 수 없다.(좀 더 예쁜 툴팁을 사용하고 싶으면 아래 커스텀 툴팁을 사용하면 됩니다.)

 

 

 

 

 

 

HTML/CSS 사용하여 툴팁 만들기

 

HTML/CSS를 사용하면 툴팁 만드는 방법은 간단합니다.

우선 div나 span 등 을 이용해서 툴팁으로 보일 객체를 만들고 만들어진 div나 span 등을 안보이게 한 상태로 오버하였을 때 보이게 하면 됩니다.

 

See the Pen [툴팁 예제] 1. HTML/CSS를 사용하여 툴팁만들기 by solutiona80 (@solutiona80) on CodePen.

 

 

 

화살표 같은 경우는 이미지 디자인을 넣어도 되지만 예제에서 처럼 border-color를 사용해서 방향에 맞게 표시를 할 수 있습니다.

 

css를 보면 tooltip_txt라는 블랙 배경 박스에 ::after를 통해 기본 코드를 넣고 각 방향에 맞게 화살표 표시를 합니다.

 

::after를 사용하려면,

content:"" 코드를 꼭 넣어주셔야 합니다.

 

 

[화살표 표시 코드 설명]

border-color : 위, 오른쪽, 아래쪽, 왼쪽 -> 방향으로 색을 표시하면 됩니다.

1. border-color : black transparent transparent transparent;

2. border-color : transparent black transparent transparent;

3. border-color : transparent transparent black transparent;

4. border-color : transparent transparent transparent black;

 

 

포스팅이 도움이 되셨으면 좋아요, 댓글, 그리고 커피 한잔의 여유 부탁드립니다.