툴팁 (Tooltip)
v-tooltip
컴포넌트는 사용자가 마우스 포인터를 요소 위에 올렸을 때 (hover) 정보를 전달하는데 유용합니다. 또한 v-model 을 이용하여 툴팁의 표시를 프로그램적으로 제어할 수 있습니다.
API
요소를 절대 위치 시킴
activator 슬롯이 사용되지 않을 경우 커스텀 activator 를 지정. 유효한 임의의 querySelector 문자열이나 유효한 노드(node) 객체가 가능
Removes overflow re-positioning for the content
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
컴포넌트를 아랫쪽(bottom)으로 정렬
메뉴가 닫힌 후(open-on-hover
prop 이 true(오타인것 같습니다. 확인 필요) 로 설정되었을 때) 지연시간 (ms;밀리세컨드)
컨트롤에 색상을 지정
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.
Components.Tooltips.
마우스를 올렸을때(hover) 툴팁이 보인 후 사라지는 시간
Components.Tooltips.
요소의 위치를 고정
Components.Tooltips.
mounted에서 컨텐츠를 조건부로 렌더링. 컨첸츠가 활성화 되었을 경우에만 렌더링합니다.
요소를 왼쪽으로 정렬
Components.Tooltips.
컨텐츠의 최대 너비
컨텐츠의 최소 너비
Nudge the content to the bottom
Nudge the content to the left
Nudge the content to the right
Nudge the content to the top
Nudge the content width
Causes the component to flip to the opposite side when repositioned due to overflow
메뉴가 열린 후(open-on-hover
prop 이 true 로 설정되었을 때) 지연시간 (ms;밀리세컨드)
activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션
activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션
요소를 오른쪽으로 정렬
Components.Tooltips.
요소를 위쪽(top)으로 정렬
Components.Tooltips.
표시여부를 조절 (Controls visibility)
컴포넌트의 z-index
예제
정렬 (Alignment)
툴팁은 활성 요소(activator elements) 의 4방향 어느쪽으로든 정렬될 수 있습니다.
표시여부 (Visibility)
툴팁의 표시여부는 v-model
을 이용해 프로그램적으로 바꿀 수 있습니다.