ActionScript 3 Tree - Node Value Pop-up After Mouse Hovers for “X” Seconds

Question

I'm fairly new to ActionScript 3 (so I'm sorry if this is a naïve question) and I'm working on an existing project that uses a "Tree" menu. Each node in the tree represents a section in the application. Unfortunately, some of the section names (which are what's displayed in the node's display value) are fairly long and requires the text to be truncated. As a result, there are times where the section names are cut off. To get around this, we want to give users the ability to see the entire title by moving their mouse cursor over the node for “X” seconds in which case a small pop-up renders the node's label.

Example

public var menuTree:Tree;

public function DoSomething(){
    menuTree.addEventListener(ListEvent.ITEM_ROLL_OVER, onListItemRollover, false, 100);
}

private function onListItemRollover(event:ListEvent):void {
    //IF MOUSE CURSOR IS STILL OVER NODE FOR "X" SECONDS DISPLAY NODE'S LABEL IN POP-UP
}

Thanks all in advance!

Answer 1

Without knowing more about your setup, I would probably setup something like this:

var timer:Timer;
var currentItem:*

for each (var node:* in menuTree) {
  node.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
  node.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
}

function overHandler(event:MouseEvent):void {
  stopTimer();

  currentItem = event.currentTarget;

  timer = new Timer(2000, 1);
  timer.addEventListener(TimerEvent.TIMER, showPopup);
  timer.start();
}

function outHandler(event:MouseEvent):void {
  stopTimer();
}

function showPopup(timerEvent:TimerEvent):void {
  stopTimer();
  //show popup code here
  //use currentItem 
}

function stopTimer():void {
  if (timer) {
    timer.stop();
    timer.removeEventListener(TimerEvent.TIMER, showPopup);
  }
}

So instead of adding the event listener to the menuTree you're going to loop though each item in the tree and add a listener to that item. Then when the user rolls over any given item it starts a timer that after 2 seconds will run a function to show the popup.