들어가며
Bootstrap의 JavaScript 섹션을 보면 툴팁 기능에 대한 부분이 있는데, JavaScript를 사용하지 않고 CSS만으로도 이런 툴팁 기능을 구현할 수 있지 않을까 하는 생각이 문득 들어서 해보니 약간의 시행착오끝에 생각보다 쉽게 구현되었다.
속으로 유레카를 외쳤지만, 나중에 검색해보니 이미 꽤 오래전에 CSS만으로 툴팁 기능을 구현해서 공개하신 분들이 여럿 계시고 꽤 수준있게 고도화한 라이브러리도 있었다.
어쨌든 누군가에게는 CSS에 대해 좀더 깊이 이해할 수 있는 기회가 될 수도 있겠다는 생각에 CSS만으로 툴팁 기능을 구현하는 방법에 대해서 간단하게 설명해보려고 한다.
CSS만으로 구성된 툴팁의 기본 형태
무언가를 이해하려면 역시 부가적인 기능이 빠진 기본적인 형태를 먼저 살펴보는 것이 가장 효과적인 방법인 것 같다. 아래의 jsfiddle을 먼저 살펴보자. JavaScript 없이도 툴팁 기능이 전혀 문제없이 구현되는 것을 볼 수 있다.
먼저 HTML 마크업을 설펴보면, data-tooltip-text 라는 속성이 눈에 띈다. 사실 이 속성명을 어떻게 짓는가는 중요하지 않다. 이 속성명을 CSS Selector 로 사용한다는 것과, 이 속성의 값을 툴팁 내용으로 뿌려준다는 것이 중요하다.
<span data-tooltip-text="THIS IS TOOLTIP!!">TOOLTIP TEST</span>
이제 CSS부분을 살펴보자. CSS에서는 먼저 data-tooltip-text 라는 속성을 가진 요소를 CSS Selector로 잡아준 후 hover action을 했을 때 이 요소의 position 을 relative 로 설정하는 것을 볼 수 있다. position 을 relative로 잡아주는 이유는 after 로 생성할 가상 자녀 요소의 위치를 이 요소의 위치를 기준으로 상대적으로 잡아주기 위함이다.
[data-tooltip-text]:hover {
position: relative;
}
실제 툴팁은 CSS의 가상 자녀 요소를 가리키는 after 가상 선택자를 통해 만들어준다. 이 가상 선택자를 사용하면 가상으로 자녀 요소를 생성할 수 있게 되고, 이 가상 자녀 요소에 CSS의 content 속성으로 툴팁의 내용을 넣어주고 툴팁 형태의 모양을 만들고 적절한 위치를 잡아주면 CSS만으로 툴팁 기능을 구현할 수 있게 된다.
[data-tooltip-text]:hover:after {
content: attr(data-tooltip-text);
position: absolute;
bottom: 100%;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
color: #FFFFFF;
font-size: 12px;
z-index: 9999;
}위에서 보면 CSS Selector를 [data-tooltip-text]:hover:after 로 잡아주었는데, 해석하자면 data-tooltip-text 라는 속성을 가진 요소에 hover 이벤트가 발생했을 때 가상 자녀 요소의 속성을 지정하겠다는 것으로 이해할 수 있다. 좀더 살펴보면, CSS의 content 속성을 사용해서 내용은 data-tooltip-text 속성의 값으로 설정하고 있는데, 이게 CSS만으로 툴팁 기능을 구현하는 핵심 중 하나이다.
또 앞서 부모 요소의 position을 relative로 잡았기 때문에 가상 자녀요소의 position은 absolute로 부모 요소를 기준으로 설정하게 된다. left, right, top, bottom 속성을 적절하게 적용하면 툴팁의 위치를 위/아래/왼쪽/오른쪽으로 잡아 줄 수 있다. 여기에서는 left와 bottom값을 지정해서 툴팁을 위에 보여주고 있는데, bottom 대신 top으로 바꾸면 아래에 보여주게 된다.
생각보다 간단하게 CSS 툴팁 기능이 구현되었지만, 만약 CSS의 position에 대한 이해나 가상 선택자, content 등의 속성 등에 대해서 모르고 있었다면 약간 이해하기 버거웠을지도 모르겠다.
기본 형태에 애니메이션을 추가한 형태
기본 형태는 마우스 커서를 올리면 바로 툴팁이 나타나기 때문에 뭔가 딱딱한 느낌이 나지만, 여기에 약간의 CSS 속성을 더하면 부드러운 애니메이션과 함께 툴팁을 보여줄 수 있다.
앞서 살펴본 기본 형태와 거의 비슷하지만 다른 점을 자세히 살펴보면 transition 속성으로 bottom 값과 opacity 값에 대해 애니메이션 효과를 준 것이 다르다는 것을 알 수 있다.
마치며
CSS만으로 툴팁 기능을 구현하는 것 자체는 상당히 오래전에 jsfiddle도 만들어놓고 포스팅할 준비를 마쳤었는데 이제야 시간에 여유가 생겨서 늦은 감이 있지만 포스팅을 했다.
여전히 나도 CSS에 대한 이해는 부족한 편이다. 꾸준히 이해를 넓혀가고 있지만 CSS의 세계는 내가 이해하는 속도보다 더 빠르게 발전하고 있는 것 같다. 얕은 이해를 바탕으로 한 글이지만 누군가 CSS에 대한 이해가 좀더 넓어지는데 도움이 되었기를 기대한다.