불친절한자수씨

gwt-ext 로 개발한 UI 가 너무 느려서 extjs 로 포팅한 모듈이 있었습니다.

하다보니 tooltip, 즉 풍선도움말이 정상적으로 표시가 안되서 그냥 넘어갔었는데...
고객의 불만이 많다는 연락을 받고... 다시한번 눈을 씻고 찾아보았지만 해결할 수 있는 방법이 없었습니다.


new Ext.Button({ iconCls:'mailmain-disk_multiple', tooltip:'첨부파일 일괄 다운로드', handler: function() { ... } })

분명히 Ext API Documentation 대로 tooltip 속성도 넣어주고 하였는데 안되길래,
ext:qtip 속성에 값도 넣어도 보고 하였지만... 역시 마찬가지 였습니다.

한참을 고민하고 있는데 그냥 QuickTips 라는 것이 눈에 띄었습니다.

그래서 Ext API Documentation::Ext.QuickTips 를 확인해 보니 아래와 같은 예제 코드가 있었습니다.
// Init the singleton. Any tag-based quick tips will start working. Ext.QuickTips.init(); // Apply a set of config properties to the singleton Ext.apply(Ext.QuickTips.getQuickTip(), { maxWidth: 200, minWidth: 100, showDelay: 50, trackMouse: true }); // Manually register a quick tip for a specific element Ext.QuickTips.register({ target: 'my-div', title: 'My Tooltip', text: 'This tooltip was added in code', width: 100, dismissDelay: 20 });

그래서 저도 속는 셈치고 아래 코드를 넣어보았습니다.

-_-;;; 이제서야 tooltip 이 나옵니다.....

이걸로 지난번의 5시간과 오늘의 4시간 삽질의 끝을 볼 수 있었습니다.

extjs 가 주특기라 아니라 원인을 파악하기는 힘들지만 어쨌든 해결했으니~ 이제 쵸큼 쉴 수 있겠습니다.

엘리먼트 property를 지정해주면 됩니다.

ext:qtip << 이 property 에 지정된 값이 tooltip 으로 표현이 됩니다.

more..