Vue에서 커스텀 툴팁 컴포넌트 생성

게시물Creating a Custom Tooltip Component in Vue은 Qvault에 처음 등장했습니다.

몇 분 안에 좋은 툴팁 솔루션으로 시작하고 실행할 수 있는 라이브러리가 많이 있습니다. 그러나 당신이 나와 같다면 언제든지 중단될 가능성이 분명한 거대한 종속성 트리에 진절머리가 날 것입니다. 이러한 이유로 우리는 사용자가 직접 구축하고 마음껏 조정할 수 있는 사용자 지정 단일 파일 도구 설명 구성 요소를 구축할 것입니다. 3분이 아니라 15분이 걸릴 수도 있습니다… 죄송합니다.

공교롭게도 이것은 우리가 사용하는 툴팁 구성 요소의 상용구이기도 합니다Qvault’s coding app..

최종 목표

우리는 단일 파일 구성 요소를 만들고 있으므로 다음 구조를 가진 단일 파일이 됩니다.

<template>

</template>

<script>

</script>

<style scoped>

</style>

이 연습이 끝나면 대상 요소 위에 떠 있고, 페이드 인 및 페이드 아웃하고, 가리키면 활성화되고, 전체 앱에서 재사용할 수 있는 도구 설명 구성 요소가 있습니다. 한 번에 각 섹션을 살펴보겠습니다.

HTML

<template>
  <div class="tooltip-box">
    <slot />
    <div
      class="tooltip"
    >
      <span
        class="text"
      >{{ text }}</span>
    </div>
  </div>
</template>

여기서는 상당히 간단한 설정입니다. 우리는 다음이 필요합니다:

전체 구성 요소를 캡슐화하고 배치를 보장하는 외부tooltip-box.

자식 구성 요소를 삽입하는 슬롯 태그입니다(도구 설명을 표시하기 위해 마우스를 가져가는 항목).

A span는 툴팁의 텍스트를 수용할 것입니다.

자바스크립트

export default {
  props: { 
    text: {
      type: String,
      required: true
    }
  }
};

매우 간단합니다. 필요한 것은 사용자가 도구 설명에서 원하는 내용을 지정하는 데 필요한 소품입니다.

CSS

.tooltip-box { 
  position: relative;
  display: inline-block;
}

.tooltip-box:hover .tooltip{
  opacity: 1;
}

.tooltip { 
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 2px;

  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 1s;

  position: absolute;
  z-index: 1;

  background: #a782e8;
}

.text::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #a782e8 transparent transparent transparent;
}

CSS는 확실히 가장 흥미로운 부분입니다. 몇 가지 핵심 사항:

절대 위치 지정이 작동하도록 최상위 요소tooltip-box가 상대적 위치에 있는지 확인해야 합니다.

불투명도 전환을 사용하여 툴팁을 페이드 인/아웃합니다.

z-index 속성은 도구 설명이 마우스를 올려야 하는 항목 위에 표시되도록 합니다.

.text::after 속성은 도구 설명 하단에 작은 삼각형 포인터를 만듭니다

.

전체 구성 요소:

<template>
  <div class="tooltip-box">
    <slot />
    <div
      class="tooltip"
    >
      <span
        class="text"
      >{{ text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: { 
    text: {
      type: String,
      required: true
    }
  }
};
</script>

<style scoped>
.tooltip-box { 
  position: relative;
  display: inline-block;
}

.tooltip-box:hover .tooltip{
  opacity: 1;
}

.tooltip { 
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 2px;

  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  opacity: 0;
  transition: opacity 1s;

  position: absolute;
  z-index: 1;

  background: #a782e8;
}

.text::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #a782e8 transparent transparent transparent;
}
</style>

사용 방법:

<Tooltip
  text="Difficulty"
 >
   <span> hover over me </span>
 </Tooltip>

읽어 주셔서 감사합니다!

질문이나 의견이 있으면 Twitter에서 팔로우하세요.

Qvault Classroom에서 게임 같은 코딩 과정을 수강하세요.

Subscribe 더 교육적인 기사를 보려면 뉴스레터로

관련 기사

How to Create a Custom Select Component in Vue.js

How to Create a Custom Toggle Switch in Vue