ToolTip (1) - HTML/CSS

마우스를 올렸을 때 부가적인 설명을 보여주기 위한 수단으로 ToolTip(툴팁)을 많이 사용하는 데

구현하는 과정에서 크게 두 가지 방법이 있어 이를 정리해보았다. 이번 게시물에서는 HTML/CSS로 만들 수 있는 ToolTip에 대해 정리하고, 다음 게시물에서 Bootstrap/react-tooltip으로 만들 수 있는 ToolTip에 대해 정리해보았다.

 

아래 블로그를 참고하여 프로젝트에 적용하였는 데

[CSS] 툴팁(tooltip) 구현하기

 

이외에도 화살표 방향도 설정할 수 있는 블로그도 있어 참고하면 좋을 것 같다.

[HTML/CSS] 툴팁 적용하는 방법 (title 및 커스텀 툴팁)

---

(코드)

import styled from "styled-components";

const Test = (props) => {
  return (
    <ToolTipCSS>
      <span class="toolTip">
        ToolTip
        <span class="toolTip_content">
          마우스를 올리면 부가설명이 나타납니다.
        </span>
      </span>
      을 만들어 보겠습니다
    </ToolTipCSS>
  );
};

const ToolTipCSS = styled.div`
  padding: 20px;

  .toolTip {
    display: inline-block;
    color: tomato;
    font-weight: bold;
  }

  .toolTip_content {
    display: none;
    position: absolute;
    max-width: 200px;
    border: 1px solid;
    border-radius: 5px;
    padding: 5px;
    font-size: 0.8em;
    color: tomato;
    background: aliceblue;
  }

  .toolTip:hover .toolTip_content {
    display: block;
  }
`;

export default Test;

 

위 코드를 HTML과 CSS로 나눠서 해석해보자면

 

(HTML)

• 부모 태그에 div를 사용해서 콘텐츠를 묶어 주고 있다.
• 자식 태그에는 해당 text에 마우스를 올렸을 때(hover 시) toolTip이 작동될 부분을 감싸준다. (className: toolTip)
• 자손 태그에는 자식 태그에 마우스를 올렸을 때(hover 시) toolTip이 작동하면서 보인 content부분을 감싸준다. (className: toolTip_content)

 

(CSS)

• . toolTip : span 태그는 display: inline 속성을 가지는 데 툴팁이 약어 바로 아래에 표시되도록 설정하기 위해 display: inline-block으로 화면에 보이는 속성을 변경한다. (나머지는 취향에 따라 추가하거나 수정하면 된다.)
• . toolTip_content : . toolTip에 hover 되지 않은 상태에서는 보이면 안 되는 부분이기 때문에 기본 속성으로 display: none을 설정하고, 위에 잠시 보였다 사라지는 역할(공간 차지 X)이기 때문에 display: absolute를 설정한다.

• display: relative일 경우 아래와 같이 출력된다.

• 예제에서는 max-width: 200px을 설정했는 데 다른 방법으로는 width: fit-content로 설정해도 비슷한 결과가 나온다.
  (이 경우 줄 바꿈을 하고 싶을 때는 <br/>이나 \n(+ white-space: pre-line)을 사용해야 한다.)

[html] '\ n'을 사용하여 HTML에서 줄 바꿈 - 리뷰나라

• . toolTip:hover . toolTip_content : . toolTip(자식)에 마우스가 올라간 경우(hover 시) . toolTip_content(자손)이 보이도록 display: none에서 display: block으로 속성을 변경한다.
  
  

(출력)