Question

So, a few days ago I posted a question regarding a jquery tooltip. I repeat: Im such a newby with this!! =S

The problem I run into now is that, ok, the tooltip is working well, all is pretty BUT when I try to make another tooltip with a change of an image (the bubble pointer. One is at the top of the bubble, the other is at the bottom) for a few seconds what I see is TWO pointers. (my tooltip is a monster with two pointers!lol)

The fiddle is: http://jsfiddle.net/Bky7F/9/

As you can see there, if you click on the first radio button, it works well. And when you click on the second radio button the new tooltip appears with 2 pointers (one at the top and one at the bottom)

I supose it might be because of the delay. But I also need to give the user a time to read the text inside the Tooltip.

I cant find how to fix this…

Could you please help me?

Thanks in advance all!!!
OrangeJuice.-

Answer 1

I’ve updated your jsfiddle here http://jsfiddle.net/Bky7F/10/. Your main issues were caused by these lines

var tip = $('.simple-message-tooltip');
var tipInner = $('.simple-message-tooltip .message');

These select all objects with the classes specified.

Your first call to simpleMessageTtip creates an object with class simple-message-tooltip, so your second call will see the first object and the object it creates. Then every manipulation you do to tip after that will manipulate all objects with class simpleMessageTtip.

Try switching the order in which you call your plugin. If you do then arrows will appear on the top and bottom of the first radio button.

To fix this you have to select only the tooltip that must be manipulated. My fix takes care of this for you.