툴팁 vs. 타이틀
WebSquare5는 HTML5의 기본 스펙인 <title> 외에 툴팁(toolTip)을 지원합니다. 툴팁의 경우 표시 여부, 스타일, 표시 시간을 개발자가 제어할 수 있는 이점이 있습니다.
CheckBox의 툴팁(toolTip)과 타이틀(title) 비교
툴팁은 toolTip 및 tooltipDisplay 속성 설정을 통해 사용할 수 있습니다.
아래 컴포넌트의 경우 tooltipDisplay 속성을 지원합니다. tooltipDisplay="true" 설정을 적용할 경우, 최종 사용자가 선택한 값은 툴팁을 통해 표시됩니다.
- 툴팁 지원 컴포넌트
Anchor
AutoComplete
Calendar
Chart
CheckBox
GridView
Group
IFrame
Image
Input
InputCalendar
MultiSelect
Radio
SearchBox
Secret
SelectBox
Slider
TextArea
TextBox
TreeView
Trigger
WFrame
WindowContainer
툴팁사용과 관련된 주요 속성은 아래와 같습니다.
- 관련 속성
toolTip: 툴팁으로 표시할 내용 정의.
toolTipDisplay: 툴팁 표시 여부 결정.
toolTipFormatter: toolTip에 정의한 값을 변환할 함수 이름. (해당 함수는 별도의 스크립트로 작성해야 함.)
Config.xml
Config.xml 파일에서 툴팁 효과를 설정할 수 있습니다.
- 툴팁 제어용 속성
toolTipSec: 툴팁이 나타나기까지의 시간을 지정. (단위: ms)
toolTipNoEffect: 툴팁의 깜빡거리는 효과를 제거.
아래와 같은 설정을 config.xml 파일에 추가할 경우 Body 하위에 포함된 컴포넌트의 툴팁 효과(깜빡거리는 현상)을 한번에 동일하게 제어할 수 있습니다.
$r_title(config.xml 설정 예)
<body>
<toolTipSec value="1"/>
<toolTipNoEffect value="true" />
</body>CheckBox
CheckBox 컴포넌트가 제공하는 각 선택항목에 대한 툴팁을 정의하여 표시할 수 있습니다.
- CheckBox 컴포넌트 전체에 대한 툴팁
toolTip="전체 툴팁 내용"
tooltipDisplay="true"
- CheckBox 컴포넌트의 선택 항목에 대한 툴팁
toolTipItemLabel="선택 항목에 대한 툴팁 내용"
tooltipDisplay="true"
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/CheckBox/tooltipDisplay_tooltipShowAlways_tooltipFormatter_CheckBox.xml)
YouTube 동영상 (https://youtu.be/cC8x3EOvoEM)
toolTipItemLabel 속성을 설정하지 않을 경우, 각 선택 항목의 label 값이 표시됩니다.
GridView
아래의 속성을 사용하여 툴팁 표시 방법을 결정할 수 있습니다.
- 관련 속성
tooltipDisplay: Body에 툴팁 표시.
tooltipShowAlways: Body에 항상 툴팁 표시.
tooltipHeader: Header에 툴팁 표시.
tooltipHeaderShowAlways: Header에 항상 툴팁 표시.
tooltipShowAlwaysColumns: 지정한 컬럼만 항상 툴팁 표시. (예: tooltipShowAlwaysColumns = "col1,col2")
tooltipFormatter: 툴팁 내용을 변환할 함수명. (함수는 별도 스크립트로 작성.)
showImageTooltip: inputType="image"인 셀도 툴팁 표시.
헤더 툴팁
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/GridView/_General/tooltipDisplay_tooltipShowAlways_GridView.xml)
YouTube 동영상 (https://youtu.be/2WxgLVxA4Qs)