툴팁 | Tooltip

Wijmo는 타겟 요소에 위로 마우스를 이동할 때 나타나는툴팁(ToolTip)을 제공합니다.

페이지의 요소와 도구 설명을 연결하기 위해서 Tooltip.setTooltip 메소드를 사용합니다.

툴팁은 Wijmo Core에서 제공되며, 컨트롤이 아니라 지정된 요소를 마우스로 가리킬 때 나타나는 HTML이 포함된 팝업입니다.

Tooltip.setTooltip 메서드를 사용하여 페이지에 있는 하나 이상의 요소와 도구 설명을 연결할 수 있습니다.

이 예제는 몇 가지 인기 있는 Wijmo 컨트롤에 도구 설명을 추가하는 방법을 보여줍니다.

import * as wijmo from '@grapecity/wijmo';

let tt = new wijmo.Tooltip();

tt.setTooltip('#menu', 'Select commands.');
tt.setTooltip('#tree', 'Explore the hierarchy.');
tt.setTooltip('#chart', '#idChartTooltip');

Angular를 사용하는 경우 wjTooltip 지시문을 사용하여 선언적으로 도구 설명을 설정할 수 있습니다.

<div [wjTooltip]="'Select commands.'"></div>
<div [wjTooltip]="'#idChartTooltip'"></div>

기본적으로 tooltip은 타겟 요소 위에 배치됩니다. 도구 설명이 표시될 위치를 지정하여 기본값을 변경할 수 있습니다.
이 샘플은 일부 span 요소와 버튼을 tooltip에 추가합니다. 버튼과 관련된 tooltip은 버튼 위가 아니라 버튼 오른쪽에 표시됩니다.