This is the result for this tutorial:
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:
//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
btn1.onRollOver = function() { tooltipTimer = setInterval(showTooltip, 1000, "This is Button 1"); }
This code sets an interval that calls the function "showTooltip" every 1000 milliseconds with the parameter "This is Button 1".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 = ...;".
btn1.onRollOut = btn2.onRollOut = btn3.onRollOut = function() { _root.Tooltip._visible = false; clearInterval(tooltipTimer); }
On the RollOut event of all button set the visibility of the tooltip to false and use the function clearInterval to stop calling "showTooltip".clearInterval(ID number); function showTooltip(tip) { _root.Tooltip._visible = true;
Make Tooltip visible._root.Tooltip._x = _xmouse; _root.Tooltip._y = _ymouse;
Set Tooltip position._root.Tooltip.tip.text = tip; }
Set text for the tooltip.That's the end of the tutorial. Happy coding!
discuss this topic to forum
