info bubbles that follow pointer

[thejudders]

Does anyone know how to make a little pop up bubble appear beside and follow your mouse pointer when you roll over a button and then vannish when u roll off a button ?

i cant think how to do it!

can anyone help ?

[strille]

You can always use a finished tooltip component. There are lots of them. Here's two:

http://www.sephiroth.it/file_detail.php?id=104
http://www.flashcomponents.net/compo...fm?nav=2&id=67

[thejudders]

thanks for that, is there any guides for custom ones which could be a graphic rather than a label or is it the same code?

[strille]

This is an easy solution, but it's not a very good one if you have many buttons that require tooltips: Create a new movie clip symbol (tooltipMC) with the graphics you want the tooltip to consist of. On the first frame, place the following code:

code:

---

// place once when clip is shown for the first time

this._x = _parent._xmouse;

this._y = _parent._ymouse;



// place when mouse has changed

this.onMouseMove = function() {

	this._x = _parent._xmouse;

	this._y = _parent._ymouse;

	updateAfterEvent(); // redraw, to make the motion smooth

}

---

Then place the tooltipMC on the "Over" state frame in the button symbol (doesn't matter where you place it). Now, the tooltipMC will show on mouse over, and follow the mouse. You need to create a new tooltipMC for every new tooltip, but at least it's simple, and the tooltip can easily be a text, an image or anything you place in the tooltip movie clip.

Edit:

I have improved this a bit and created a function, which will make things easier. Place this on the main timeline on frame 1:

code:

---

_global.toolTip = function(instance, delay, showTime) {

	if (instance.toolTipInit == undefined) { // just setup tooltip once

		if (delay > 0) { // hide and show after delay milliseconds

			instance._visible = false;

			instance.delayInterval = setInterval(function() {

				instance._visible = true;

				clearInterval(instance.delayInterval);

			}, delay);

		}

		

		if (showTime > 0) {

			instance.showInterval = setInterval(function() {

				instance._visible = false;

				clearInterval(instance.showInterval);

			}, delay+showTime);

		}

		

		// place once when clip is shown for the first time

		instance._x = instance._parent._xmouse;

		instance._y = instance._parent._ymouse;

	

		// place when mouse has changed

		instance.onMouseMove = function() {

			instance._x = instance._parent._xmouse;

			instance._y = instance._parent._ymouse;

			updateAfterEvent(); // redraw, to make the motion smooth

		}

		

		instance.toolTipInit = true;

	}

}

---

Then place the following line on frame 1 in a movie clip you want to use as a tooltip:

code:

---

toolTip(this, delay, showTime);

---

The first argument should always be this, the second argument is the number of milliseconds to delay before showing the tooltip and the third is the number of milliseconds to show the tooltip. So, to have a tooltip appear after one second and be shown for three seconds, just type:

code:

---

toolTip(this, 1000, 3000);

---

If you want the tooltip to be displayed as long as the mouse is over the button, set showTime to 0.

Then it's just to place this movie clip on the "Over" state in the button.

Works pretty good.

[bismark65]

You basically just need to go to the button timeline and add the graphic or text in the "over" frame of the button's timeline. What ever you draw into this frame will appear when the mouse is over the button. It can appear anywhere on the stage.