의사 요소가 있는 도움말

우리는 이미 방문하거나 구축 중인 모든 웹 사이트에서 단순한 도구 설명이 얼마나 중요한지 이미 알고 있습니다. 아무 곳이나 클릭하지 않고도 더 많은 정보를 제공하는 데 사용됩니다. 이는 큰 장점일 뿐입니다.

추가 마크업(HTML)을 작성하지 않고도 간단한 도구 설명을 작성할 수 있다는 사실을 알고 계셨습니까? 예, 의사 요소를 사용하여 이를 달성할 수 있습니다. 이제 코드로 바로 들어가 봅시다.

간단한 HTML 및 스타일링으로 시작

이를 시작하기 위해 몇 가지 기본 스타일로 간단한 HTML을 설정하겠습니다.

<p> Show me some <span id="tooltip-container">more</span></p>

p {
  font-size: 32px;
  color: white;
  font-family: monospace;
}

#tooltip-container {
  text-decoration: underline;
  postition: relative;
  color: lightblue;
}

의사 요소 추가

의사 요소를 추가하기 위해 CSS 선택기를 사용할 것입니다. ::before 또는 ::after 를 사용할 수 있습니다. 둘 다 작동하지만 일부 위치 변경을 수행해야 할 수도 있습니다. 나는 이것을 ::before로 구현하려고 하지만 ::after로 시도할 수도 있습니다.

#tooltip-container::before {
  content: 'The more is here';
  position: absolute;
  background: #0a0a0a;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
  bottom: 100%;
}

보시다시피, 우리는 우리가 넣은 스타일에 따라 특정 방식으로 배치된 의사 요소를 가지고 있습니다. 지금은 좋아 보인다.

호버 효과 추가

우리는 요소를 추가했지만 그것이 항상 거기에 있기를 원하지는 않습니다, 그렇죠? 툴팁처럼 작동하기를 원합니다. 이를 위해 호버 효과를 추가해 보겠습니다(이것은 예일 뿐이며 자신만의 효과를 추가할 수도 있습니다).

#tooltip-container::before {
  content: 'The more is here';
  position: absolute;
  background: #0a0a0a;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 15px;
  white-space: nowrap;
  bottom: 0;
  transform: scale(0);
  transition: 
    transform 150ms ease-out,
    bottom 150ms ease-out;
}

#tooltip-container:hover::before {
  bottom: 100%;
  transform: scale(1);
}

동적 콘텐츠 추가

이것은 모두 좋지만 툴팁 내용을 CSS에 직접 넣는 것을 피하고 싶을 수 있습니다. 더 나은 방법이 있습니까? 대답은 예, 그렇습니다. 나중에 CSS에서 선택기로 사용할 수 있는 HTML의 data- 속성을 사용할 수 있습니다. 위의 예를 계속 사용하고 몇 가지 사항을 변경해 보겠습니다.

<p> Show me some <span data-tooltip="New tooltip is here!!">more</span></p>

#span[data-tooltip]::before {
  content: attr(data-tooltip);
 // ... All other CSS Properties are same as previous example
}

#span[data-tooltip]:hover::before {
  // ... All other CSS Properties are same as previous example
}

다음 단계

Javascript를 사용하여 이를 구현할 수 있습니다. 직접 한 번 시도해 보십시오. 여전히 문제가 발생하면 제가 동일하게 구현한 여기codepen를 확인하십시오.

이 블로그를 즐기고 새로운 것을 배웠기를 바랍니다. 질문/제안 사항이 있으시면 언제든지 의견에 추가해 주십시오. 에서 나와 연결하세요.