DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Posted by webzo

Create three buttons and drag them to the stage. Give the instance names "btn1", "btn2", "btn3", etc.

You can create one button, duplicate it two times and just change the text.

Now create a new Movie Clip and draw you tooltip.

On the top of your tooltip draw a dynamic text box with the instance name "tip", we will change the text later by using this name.

Go back to the main timeline and drag an instance of the Tooltip Movie Clip with the name "Tooltip".

Now go to the actions for the first frame and paste:

Code: Select all
//when the mouse roll over
btn1.onRollOver = function()
{
//explained bellow
tooltipTimer = setInterval(showTooltip, 1000, "This is Button 1");
}

btn2.onRollOver = function()
{
tooltipTimer = setInterval(showTooltip, 1000, "This is Button 2");
}

btn3.onRollOver = function()
{
tooltipTimer = setInterval(showTooltip, 1000, "This is Button 3");
}

//same event for all buttons
btn1.onRollOut = btn2.onRollOut = btn3.onRollOut = function()
{
//hide the tool tip
_root.Tooltip._visible = false;

//clear the interval made on the roll over.
clearInterval(tooltipTimer);
}

//function with the parameter "tip", tip is the text used in the tooltip
function showTooltip(tip)
{
//tooltip is visible
_root.Tooltip._visible = true;

//set the tooltip position to be equal to the mouse.
_root.Tooltip._x = _xmouse;
_root.Tooltip._y = _ymouse;

//set the text of the textbox inside the tooltip Movie Clip to the parameter "tip"
_root.Tooltip.tip.text = tip;
}


Test you code (Ctrl + Enter), leave you mouse over a button for at least one second to see the tooltip.

Code Explanation

Code: Select all
btn1.onRollOut = btn2.onRollOut = btn3.onRollOut = function()
{
_root.Tooltip._visible = false;
clearInterval(tooltipTimer);
}


This code sets an interval that calls the function "showTooltip" every 1000 milliseconds with the parameter "This is Button 1".

Code: Select all
setInterval(function name, milliseconds, parameters for the function);


The third parameter for setInterval is optional.
Every setInterval returns an unique ID and this ID number is need if we want to stop calling the function "showTooltip".
That's why we used "tooltipTimer = ...;".

Code: Select all
btn1.onRollOver = function()
{
tooltipTimer = setInterval(showTooltip, 1000, "This is Button 1");
}


On the RollOut event of all button set the visibility of the tooltip to false and use the function clearInterval to stop calling "showTooltip".

Code: Select all
clearInterval(ID number);

function showTooltip(tip)
{
_root.Tooltip._visible = true;


Make Tooltip visible.

Code: Select all
_root.Tooltip._x = _xmouse;
_root.Tooltip._y = _ymouse;


Set Tooltip position.

Code: Select all
_root.Tooltip.tip.text = tip;
}


Set text for the tooltip.

That's the end of the tutorial. Happy coding!