툴팁 (Tooltip)

v-tooltip 컴포넌트는 사용자가 마우스 포인터를 요소 위에 올렸을 때 (hover) 정보를 전달하는데 유용합니다. 또한 v-model 을 이용하여 툴팁의 표시를 프로그램적으로 제어할 수 있습니다.

사용법

툴팁은 어떤 요소(element)든 감쌀 수 있습니다.


API

v-tooltip
이름
absolute
디폴트
false
타입
boolean

요소를 절대 위치 시킴

이름
activator
디폴트
undefined
타입
any

activator 슬롯이 사용되지 않을 경우 커스텀 activator 를 지정. 유효한 임의의 querySelector 문자열이나 유효한 노드(node) 객체가 가능

이름
allow-overflow
디폴트
false
타입
boolean

Removes overflow re-positioning for the content

이름
attach
디폴트
false
타입
any

Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

이름
bottom
디폴트
false
타입
boolean

컴포넌트를 아랫쪽(bottom)으로 정렬

이름
close-delay
디폴트
200
타입
number | string

메뉴가 닫힌 후(open-on-hover prop 이 true(오타인것 같습니다. 확인 필요) 로 설정되었을 때) 지연시간 (ms;밀리세컨드)

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
content-class
디폴트
undefined
타입
any

Applies a custom class to the detached element. This is useful because the content is moved to the end of the app and is not targettable by classes passed directly on the component.

이름
dark
디폴트
false
타입
boolean
이름
debounce
디폴트
0
타입
number | string

마우스를 올렸을때(hover) 툴팁이 보인 후 사라지는 시간

이름
disabled
디폴트
false
타입
boolean
이름
fixed
디폴트
true
타입
boolean

요소의 위치를 고정

이름
input-activator
디폴트
false
타입
boolean
이름
lazy
디폴트
false
타입
boolean

mounted에서 컨텐츠를 조건부로 렌더링. 컨첸츠가 활성화 되었을 경우에만 렌더링합니다.

이름
left
디폴트
false
타입
boolean

요소를 왼쪽으로 정렬

이름
light
디폴트
false
타입
boolean
이름
max-width
디폴트
auto
타입
number | string

컨텐츠의 최대 너비

이름
min-width
디폴트
undefined
타입
number | string

컨텐츠의 최소 너비

이름
nudge-bottom
디폴트
0
타입
number | string

Nudge the content to the bottom

이름
nudge-left
디폴트
0
타입
number | string

Nudge the content to the left

이름
nudge-right
디폴트
0
타입
number | string

Nudge the content to the right

이름
nudge-top
디폴트
0
타입
number | string

Nudge the content to the top

이름
nudge-width
디폴트
0
타입
number | string

Nudge the content width

이름
offset-overflow
디폴트
false
타입
boolean

Causes the component to flip to the opposite side when repositioned due to overflow

이름
open-delay
디폴트
200
타입
number | string

메뉴가 열린 후(open-on-hover prop 이 true 로 설정되었을 때) 지연시간 (ms;밀리세컨드)

이름
position-x
디폴트
undefined
타입
number

activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션

이름
position-y
디폴트
undefined
타입
number

activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션

이름
right
디폴트
false
타입
boolean

요소를 오른쪽으로 정렬

이름
tag
디폴트
'span'
타입
string
이름
top
디폴트
false
타입
boolean

요소를 위쪽(top)으로 정렬

이름
transition
디폴트
undefined
타입
string
이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

이름
z-index
디폴트
undefined
타입
any

컴포넌트의 z-index

예제

정렬 (Alignment)

툴팁은 활성 요소(activator elements) 의 4방향 어느쪽으로든 정렬될 수 있습니다.


표시여부 (Visibility)

툴팁의 표시여부는 v-model을 이용해 프로그램적으로 바꿀 수 있습니다.