.다양한 툴팁

툴팁 컨트롤은 보통 조그만 사각형이며 노란색 바탕에 검정색 폰트로 텍스트를 보여 주는데 단조로운 모양을 다양하게 변형할 있다. 너무 요란해 보이면 곤란하겠지만 약간의 변화만 줘도 훨씬 읽기 쉽고 예쁜 툴팁이 된다. 값들 바꿀 때는 물론 메시지를 사용하는데 어떤 속성들이 있고 어떻게 바꾸는지 요약식으로 정리해 보도록 하자.

지연 시간

지연 시간(Duration)이란 툴팁이 나타나고 사라질 시간을 지정하는 값이다. 툴팁과 관련된 지연 시간은 세가지 종류가 있다. 지연시간 설정에 따라 툴팁이 나타나거나 사라지는 시간이 변경된다.

 

초기 지연 시간(Initial) : 툴팁이 얼마동안 위에 머물러 있어야 하는지를 지정하며 시간이 경과하면 툴팁이 출력된다. 커서가 마우스 위에 올라오는 즉시 툴팁이 출력되는 것보다는 일정시간 경과 출력되는 것이 좋다.

팝업 지연 시간(AutoPop) : 툴팁이 출력된 상태에서 커서가 움직이지 않을 경우 얼마동안 툴팁을 보여줄 것인가를 지정한다. 도움말을 출력한 채로 너무 오랫동안 있으면 좋지 않으므로 사용자가 읽을 정도의 시간이 지나면 사라지는 것이 좋다. 시간동안 커서가 움직이지 않으면 툴팁이 자동으로 사라진다.

다시 보임 지연 시간(Reshow) : 툴팁이 출력된 상태에서 옆의 툴로 이동할 때의 지연 시간이다. 이미 툴팁이 출력된 상태에서 다른 툴팁으로 변경하는 것이므로 보통 초기 지연 시간보다는 훨씬 짧게 준다.

 

초기 지연 시간은 보통 마우스 더블클릭 시간과 동일하며 대개의 시스템에서는 0.5초이다. 위에서 0.5초동안 커서가 정지해 있으면 툴팁이 출력된다. 팝업 지연 시간은 초기 지연 시간의 10배로 되어 있으며 다시 보임 지연 시간은 초기 지연 시간의 1/5 되어 있다. 5초동안 가만히 있으면 툴팁이 사라지며 옆의 툴로 이동할 때는 0.1초만에 툴팁이 다시 나타난다. 개발자 스튜디오의 툴팁을 자세히 관찰해 보고 세가지 시간이 어떻게 적용되는지 살펴보기 바란다.

툴팁 컨트롤은 위에 커서가 올라올 초기 시간 간격으로 타이머를 설치하며 타이머가 WM_TIMER 메시지를 발생시킬 툴팁을 출력한다. 이때 다시 팝업 시간 간격으로 타이머를 설치하여 시간동안 커서가 가만히 있으면 툴팁을 제거한다. 툴팁은 항상 타이머로 툴팁 출력 시간을 제어하고 있는 것이다. 값은 TTM_SETDELAYTIME 메시지로 개별적으로 조정할 있다. lParam 하위 워드에 어떤 시간을 조정할 것인가를 지정하는데 다음값 하나를 준다.

 

설명

TTDT_INITIAL

초기 지연 시간을 설정한다. -1 주면 기본값으로 지정하는데 기본값이란 마우스 더블클릭 시간과 동일하다.

TTDT_AUTOPOP

팝업 지연 시간을 설정한다. -1 주면 기본값으로 지정한다.

TTDT_RESHOW

다시 보임 지연 시간을 설정한다. -1 주면 기본값으로 지정한다.

TTDT_AUTOMATIC

값을 모두 기본값으로 설정한다. 초기 지연시간은 wParam값으로 지정되며 팝업 지연 시간은 초기 지연 시간의 5, 다시 보임 지연 시간은 초기 지연 시간의 1/5 된다.

 

wParam에는 설정할 시간값을 1/1000 단위로 준다. 지연 시간을 조사하고 싶을 때는 TTM_GETDELAYTIME 메시지를 사용하며 wParam으로 알고자 하는 시간에 대한 값에 대한 플래그를 주면 된다.

지연 시간을 어떻게 설정할 것인가는 도움말의 종류에 따라 선택해야 한다. 초기 지연시간이 너무 짧으면 마우스가 움직이는 족족 툴팁이 출력되어 다소 지저분해 보이는 경향이 있으며 너무 길면 사용자가 오랫동안 기다려야 하므로 불편할 것이다. 보여주는 정보의 성격에 따라 초기 지연 시간을 선택해야 한다. 팝업 지연 시간은 정보의 양에 따라 결정되는 것이 합리적인데 읽어야 내용이 길다면 오랫동안 유지해 주는 것이 좋고 아주 짧다면 금방 사라지는 것이 좋을 것이다.

색상

기본 색상은 노란색 바탕에 검정색 글자인데 배경색과 글자색을 각각 변경할 있다. 색상을 변경할 때는 TTM_SETTIPBKCOLOR, TTM_SETTIPTEXTCOLOR 메시지를 사용하며 wParam으로 변경하고자 하는 색상값을 전달해 준다. 색상을 조사할 때는 같은 이름의 TTM_GET~ 메시지를 사용한다.

여백

여백이란 툴팁의 경계선과 텍스트와의 간격인데 값이 너무 좁으면 갑갑해 보이고 너무 넓으면 별로 예뻐 보이지 않을 것이다. 디폴트 여백 정도가 적당한데 넓게 하거나 좁게 하고 싶다면 TTM_SETMARGIN 메시지로 간격을 조정할 있다. 메시지의 lParam으로 변의 간격을 지정하는 RECT 구조체를 전달해 준다. 구조체는 사각형을 표현하는 용도로 사용하지만 메시지에서는 사각형의 좌표가 아니라 변의 여백을 픽셀 단위로 지정한다.

여백을 조사할 때는 TTM_GETMARGIN 메시지를 사용하되 lParam으로 RECT 구조체의 포인터를 전달해 주면 구조체에 현재 설정되어 있는 여백을 조사해 준다.

최대폭

툴팁의 폭은 별도로 지정해 주지 않는 텍스트의 길이만큼이며 텍스트가 길어지면 툴팁도 따라서 길어진다. 만약 보여주어야 텍스트가 아주 길다면 한줄에 보여주는 것보다는 오른쪽 그림처럼 적당히 개행을 주는 것이 보기 좋을 것이다.

 

 

최대폭이란 개행 위치를 지정하는 오른쪽 좌표값이며 위치에서 공백을 기준으로 자동으로 개행하여 아랫줄로 내려 준다. 예를 들어 값을 300으로 지정하면 툴팁의 폭이 최대 300까지 가능하며 문자열이 이상이 경우 자동으로 개행하여 여러줄로 툴팁을 보여줄 것이다. 최대폭을 지정하면 여러 줄로 툴팁을 만들 있으며 \r\n 개행 코드를 넣어 강제로 개행할 위치를 지정할 수도 있다. 툴팁의 폭은 최대폭으로 조정할 있으나 높이는 별도로 조정할 없으며 텍스트 양에 따라 자동으로 결정된다.

디폴트 최대폭은 -1 되어 있으며 이는 개행을 하지 않는다는 뜻이다. 설사 \r\n 개행 코드를 넣어 주어도 최대폭이 -1 되어 있으면 강제 개행도 되지 않는다. 툴팁이 조금 길다면 최대폭을 지정하여 적당한 위치에서 개행되도록 주는 것이 보기에 좋다. 최대폭을 조사하거나 설정할 때는 TTM_G(S)ETMAXTIPWIDTH 메시지를 사용하는데 lParam으로 최대폭의 픽셀값을 전달한다.

폰트 변경

툴팁의 폰트를 변경하는 방법은 일반적인 윈도우와 동일하며 원하는 폰트를 생성한 핸들을 WM_SETFONT 메시지의 wParam으로 전달해 주면 된다. 폰트는 툴팁이 파괴되고 후에 반드시 파괴해 주어야 한다. 설정된 폰트를 조사할 때는 물론 WM_GETFONT 메시지를 사용한다.

TipSetting

여기까지 툴팁의 여러 가지 속성을 조사하거나 변경하는 방법을 정리해 보았는데 이상 상세한 설명을 하기 보다는 직접 예제를 만들어 보고 속성을 변경해 보면 쉽게 이해가 것이다. TipSetting 예제는 툴팁의 여러 속성을 조사하거나 변경해 보고 결과를 바로 확인해 있도록 의도적으로 만든 예제이다. 실행중의 모습은 다음과 같다.

위쪽의 버튼, 에디트, 리스트 박스는 툴로 등록된 윈도우들이며 아래쪽의 컨트롤들로 툴팁의 속성을 변경하거나 설정해 보아라. 지연시간을 변경하면 어떤 효과가 있고 배경색을 어떤 색으로 써야 예쁜지 바로 테스트해 있다. 색상이나 글꼴, 여백을 조정함으로써 분위기를 색다르게 연출해 있을 것이다.

  

예제의 소스를 보면 속성들을 어떻게 바꾸고 조사하는지 있는데 이미 앞에서 설명한 것들이고 소스 자체가 어렵지 않으므로 소스에 대한 분석은 하지 않기로 한다. CD-ROM 있는 예제를 직접 열어 보기 바란다.

풍선형 도움말

보통 모양의 툴팁은 직사각형인데 비해 풍선형 도움말은 마치 만화에 나오는 꼭지가 달린 풍선 모양을 하고 있어 훨씬 깜찍하다. 툴팁 컨트롤을 생성할 TTF_BALLOON 스타일만 주면 풍선형 도움말을 만들 있다.

 

hTip=CreateWindowEx(WS_EX_TOPMOST,TOOLTIPS_CLASS,NULL,TTS_BALLOON,

CW_USEDEFAULT,CW_USEDEFAULT,CW_USEDEFAULT,CW_USEDEFAULT,

hWnd,NULL,g_hInst,NULL);

 

툴을 등록하는 방법이나 적용되는 속성은 일반 툴팁과 동일하므로 특별히 프로그래밍하기 어려운 것도 아니다. 커서가 있는 위치에 꼭지가 나타나는데 모양과 위치는 커서 위치에 따라 약간씩 달라진다.

 

보통은 오른쪽 그림처럼 출력되지만 툴이 화면 위에 있다거나 오른쪽 끝에 있으면 꼭지의 방향도 따라서 바뀐다.