[Vue.js/Vuetify] v-tooltip 사용법

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

v-tooltip

---

v-tooltip을 사용하면 Vuetify 홈페이지를 보면 알 수 있듯, 마우스를 특정 요소에 올리면 tip이 표시되도록 할 수 있다. 

 

 

v-tooltip 사용법

---

  v-tooltip 태그로 감싸, template내에서 tooltip이 반응했으면 하는 요소를 쓴다. icon이나 span등 어떤 태그여도 가능하다. 그리고 커서를 맞출 때 표시하는 tooltip의 내용을 v-tooltip태그 바로 아래에 쓴다. v-image나 h1태그 등에도 사용 가능하다.

<v-tooltip top>
  <template v-slot:activator="{ on }"> 
    <span v-on="on" class="light-blue--text">위에 팝업</span>
  </template>
  <span>tooltip에 표시할 것</span>
</v-tooltip>

 작성했듯 위에 팝업이라는 문자에 커서를 올리면 "tooltip에 표시할 것"이라는 tooltip이 표시된다. 

 

 

tooltip으로 변수의 HTML 전개

---

 변수 태그를 전개할 때는 v-html을 쓴다.

<v-tooltip top>
  <template v-slot:activator="{ on }"> 
    <span v-on="on" class="green--text">테스트</span>
  </template>
  <span v-html="this.tooltipText"></span>
</v-tooltip>

 

 

v-tooltip에서 사용할 수 있는 속성

---

 지금 작성한 속성은 향후에 바뀔 수 있으니 공식 홈페이지를 먼저 참고하길 바란다.

속성	내용
top	툴팁을 위에 표시
bottom	툴팁을 아래에 표시
left	툴팁을 왼쪽에 표시
right	툴팁을 오른쪽에 표시
z-index	툴팁의
max-width	툴팁의 최대 폭을 지정(지정 폭을 넘으면 텍스트가 줄바꿈된다.)
min-width	툴팁의 최소 폭을 지정

---

참고자료

https://tedate.jp/vue-js/about-vuetify-ui-components-tooltip-dropmenu

https://codelikes.com/vuetify-tooltip/