프로그래밍/Flash/Flex

[Flex Component] 스타일이 자유로운 풍선 ToolTip

드럼캡 2010. 2. 10. 13:23

플렉스의 ToolTip의 사용방법과 스타일을 주는 것은 대부분의 플렉스를 하는 사람이라면 잘 알 것입니다. 하지만, 유용한 이 툴팁에는 몇가지 단점이 있는데, 그것은 다음과 같습니다.


1. 스타일은 어플리케이션 전체의 전역적인 클래스 타입의 스타일 밖에 적용되지 않습니다. 따라서 각각의 툴팁에 다른 스타일을 줄 수 없으며 이러한 경우 별도 UIComponent를 사용해 툴팁을 별도 제작해야합니다. 

2. 그리고 풍선 모양의 툴팁을 사용해야 할 때가 종종 있는데 이러한 경우도 지원하지 않으며 별도로 툴팁을 만들어야 합니다.


다음의 커스텀툴팁 매니저를 이용하고 스타일 이름으로 툴팁의 스타일을 매니저에게 넘겨주면 툴팁이 동적으로 생성됩니다.

원리는 툴팁 속성에 아무 값이나 주고 툴팁이 생성되게 설정한 후 toolTipCreate 이벤트에서 툴팁을 가로채서 별도의 툴팁으로 바꿔버리는 방법입니다. 


사용방법은 다음과 같습니다.

예를들어 버튼이 있다면 (toolTip 속성이 있는 UIComponent 를 상속받은 클래스들) 다음과 같이 설정합니다. 3가지를 모두 제대로 설정해야 제대로 보입니다.


CSS 에서는 다음과 같이...


컴포넌트 에서는 다음과 같이..



아래의 샘플에서 마우스 오른쪽 버튼 - view source 하시면 소스를 보실 수 있습니다.

(현재 샘플 소스가 한글이 깨져보이네요. 이부분 서둘러 잡을 테니 우선 소스를 다운로드 해서 봐주세요)






반응형