Wikipedia의 툴팁 코딩!

인기 웹사이트의 UI를 재현하는 것은 재미있습니다. 오늘은 위키백과의 툴팁을 코딩해보겠습니다!

비디오 버전을 보고 싶다면 바로 여기에 있습니다.



하지만 먼저 ...
툴팁이란 무엇입니까?

도구 설명은 일반적으로 링크, 버튼 또는 아이콘을 가리키면 표시되는 일부 컨텍스트입니다.



차근차근 해봅시다.

1. 툴팁과 링크를 생성합니다.

링크:

  <span class="tooltip"><a href="#">Tooltip1</a></span>
  <span class="tooltip"><a href="#">Tooltip2</a></span>
  <span class="tooltip"><a href="#">Tooltip3</a></span>

툴팁:

<div class="tooltip-container">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero tenetur non laborum dolorem laboriosam quo quibusdam assumenda dolores eveniet. Ipsum?
</div>

더 쉽게 배치할 수 있도록 절대 위치로 스타일을 지정합니다.

.tooltip-container {
  width: 425px;
  min-height: 200px;
  padding: 15px;
  font-size: 25px;
  background: white;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,0.3);
  position: absolute;
  z-index: 100;
  display: none;
  opacity: 0;
}
.fade-in {
  display: block;
  animation: fade 0.2s linear forwards;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

없음에서 차단으로 표시한 다음 불투명도 0에서 1로 애니메이션하는 멋진 애니메이션을 확인하십시오! ♥

2 JavaScript로 애니메이션을 만듭니다.

모든 링크와 툴팁 컨테이너를 가져옵니다.

const tooltips= Array.from(document.querySelectorAll(".tooltip"));
const tooltipContainer = document.querySelector(".tooltip-container");

모든 링크에서 mouseenter 및 mouseout을 듣고 마우스가 있는 곳에 도구 설명을 배치합니다.

tooltips.forEach((tooltip) => {
  tooltip.addEventListener("mouseenter", (e) => {

    tooltipContainer.classList.add("fade-in");
    tooltipContainer.style.left = `${e.pageX}px`;
    tooltipContainer.style.top = `${e.pageY}px`;

  });

  tooltip.addEventListener("mouseout", () => {
    tooltipContainer.classList.remove("fade-in");
  });
});

만세, 해냈어!
툴팁에 대한 각 링크에 대한 사용자 지정 텍스트를 추가하려면 비디오에 표시하고 있습니다. 너무 긴 기사를 만들고 싶지 않습니다.

반짝이는 모든 CSS가 포함된 소스 코드는 다음과 같습니다.
https://codepen.io/Ziratsu/pen/ExgEwOw

제 새로운 유튜브 채널을 보러 오세요:

나를 따라오는 선구자가 되라 uh ? 😎

다음 시간에 빠르고 세련된 튜토리얼로 만나요!