순수 CSS로 사용자 정의 툴팁을 만드는 방법

나는 항상 브라우저의 표준 툴팁이 약간 지루하다는 것을 알기 때문에 보통 사용자 정의 툴팁을 구현합니다.

표준 툴팁은 Html 요소에 title 속성을 추가하여 사용할 수 있습니다. 사용자가 요소 위로 마우스를 가져가면 잠시 후 도구 설명이 표시됩니다. 이와 같이:

나를 가리켜

---

<h2 title="DEV is a community of software developers">
Dev.to
</h2>

사용자 지정 도구 설명에는 세 가지 항목이 필요합니다.

툴팁이 포함된 요소

툴팁을 포함하고 요소 위로 마우스를 가져갈 때만 표시되는 호버 카드

도구 설명 콘텐츠 자체

내 예에는 링크 목록이 있고 링크 위로 마우스를 가져가면 해당 링크의 대상에 대한 간략한 요약을 볼 수 있습니다.

먼저 Html을 만들어 봅시다.

<li class="recent-link">
  <a href="https://www.crumb-collector.com">Crumb Collector</a>
  <span class="hovercard">
    <div class="tooltiptext">
      Crumb Collector is a minimal and easy to use bookmark manager.
    </div>
  </span>
</li>

이제 링크, hovercard 및 도구 설명 텍스트가 포함된 목록 항목 요소가 있습니다.


먼저 목록 항목의 스타일을 지정합니다. 우리는 position 속성을 할당해야 합니다. 그래야 상대적으로 자식을 배치할 수 있습니다.

.recent-link {
  position: relative;
  color: #252525;
  padding-bottom: 18px;
  font-size: 1rem;
}

다음으로 hovercard를 배치합니다. opacity: 0를 설정하여 처음에는 보이지 않게 합니다. opacity: 1 위로 마우스를 가져가면 불투명도가 .recent-link로 변경됩니다.z-index: 1를 사용하여 낮은 값z-index(기본값 0)으로 다른 콘텐츠 위에 표시되도록 합니다.
위치 지정은 도구 설명의 길이와 내용에 따라 다릅니다. 콘텐츠가 길수록 호버카드를 오프셋해야 합니다.

.hovercard { 
  position: absolute; 
  opacity: 0; 
  z-index: 1;
  left: 50%;
  top: -90px;
  transform: translateX(-50%);
}

.recent-link:hover .hovercard { 
  opacity: 1; 
  transition: 0.5s;
  transition-delay: 0.1s;
}

마지막으로 툴팁 자체의 스타일을 지정합니다. 예를 들면 다음과 같습니다.

.tooltiptext {
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  background-color: #0366d6;
  padding: 18px; 
  border-radius: 5px; 
  color: white; 
  line-height: 15px;
  transition: 1s;
  width: 200px;
}

다음과 같습니다.




우리는 tooltiptext-class 내에서 우리가 원하는 모든 것을 할 수 있습니다.

아바타 위로 마우스를 가져갈 때 사용자에 대한 추가 정보를 표시하고 싶다고 가정해 보겠습니다(Squarespace에서 영감을 받음).

  <div class="hovercard">
        <div class="cover-image">
          <div class="avatar">A
          </div>
          <div class="username">Plain Water</div>
        </div>
        <div class="points">2,345</div>
        <ul class="stats">
          <li class="stats-item">Content Count: </li>
          <li class="stats-item">Joined: </li>
          <li class="stats-item">Last Visited: </li> 
        </ul>
      </div>

마지막 말

이 튜토리얼을 확인해 주셔서 감사합니다. 도움이 되거나 이와 같은 내용을 더 보고 싶다면 알려주세요.
질문이 있으시면 댓글로 알려 주시거나 메시지를 보내주세요.