Flexでツールチップの位置を調整するには？

Flexのツールチップは非常に便利にできている。利用するにはtooltipプロパティーに表示したいテキストを入力しておくだけだ。表示・非表示のタイミングや位置の調整もかなり自動的にやってくれる。

ただ、やはり完璧ではない。ツールチップを表示したいコンポーネントがブラウザの最下段にあった場合、ツールチップがそのコンポーネントを隠してしまうことがある。

これでは非常に邪魔なので位置を調整したいけど、どうすればできるか？

ツールチップが使えるコンポーネントには「toolTipShow」というイベントプロパティーがあるので、このプロパティーに次のようなfunctionを入力しておけばいい。

/**
 * ウインドウ最下段でツールチップを表示する場合の処理
 * @param evt
 * 
 */
private function onToolTipShowWindowBottom(evt:ToolTipEvent):void {
  var obj:DisplayObject = evt.currentTarget as DisplayObject;
  var pos:Point = obj.localToGlobal(new Point(obj.x, obj.y));
  var tH:int = evt.toolTip.height;
  var tY:int = pos.y - tH - 5; //コンポーネントより5px上に表示
  trace("onToolTipShowWindowBottom() tY=" + tY + " tH=" + tH + " pos=" + pos);
  evt.toolTip.y = tY;
}

ポイントはツールチップの座標系がグローバルであるというところ。なので、ツールチップを表示するコンポーネントの座標をグローバル座標系で変換しておく必要がある。

今回は横位置に関してはシステムに任せることにしたけど、evt.tooTip.xを同様に調整すれば横位置の調整も可能だろう。

結果としてはこうなる。