[vue.js] v-tooltip 사용하기

 

tooltip

vue tooltip 라이브러리 중에 vuetify를 제외하고 쓸만한 라이브러리가 v-tooltip 밖에 없는 듯...

1. 설치

npm install --save v-tooltip

 

2. 글로벌 등록

//main.js

import Vue from 'vue'
import VTooltip from 'v-tooltip' //추가 

Vue.use(VTooltip); //추가

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

3. 스타일 적용하기

공식문서에 일반 css 와 pre-processor 방식인 sass, less  방식이 있다.

공식문서에는 자세히 안나와 있어서, 전역 스타일 안에다가 아래 코드를 넣었는데 작동하지 않았고, 

개발자 도구를 열고 보니, 최상단에서 작동하는 것을 확인하였음.

최상단에서 작동

따라서, 글로벌로 작동하는 scss 와 같은 레벨에 따로 scss 파일을 만들고 넣어줬으며,

사용하고자 하는 컴포넌트 scss에서 @import해서 사용.

//tooltip.scss

.tooltip {
  display: block !important;
  z-index: 10000;

.tooltip-inner {
  background: #262626;
  color: white;
  padding: 3px 8px;
  font-size: 12px;
  height: 24px;
  line-height: 1.7;
}

.tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
  z-index: 1;
}

&[x-placement^="top"] {
  margin-bottom: 5px;

  .tooltip-arrow {
    border-width: 5px 5px 0 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    bottom: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
}

&[x-placement^="bottom"] {
  margin-top: 5px;

  .tooltip-arrow {
    border-width: 0 5px 5px 5px;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-top-color: transparent !important;
    top: -5px;
    left: calc(50% - 5px);
    margin-top: 0;
    margin-bottom: 0;
  }
}

&[x-placement^="right"] {
  margin-left: 5px;

  .tooltip-arrow {
    border-width: 5px 5px 5px 0;
    border-left-color: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    left: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
}

&[x-placement^="left"] {
  margin-right: 5px;

  .tooltip-arrow {
    border-width: 5px 0 5px 5px;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    right: -5px;
    top: calc(50% - 5px);
    margin-left: 0;
    margin-right: 0;
  }
}

&[aria-hidden='true'] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

&[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}
}

local 컴포넌트 범위에서 사용하고자 할때는 반드시 style에서 scoped를 제외해주어야 한다.