JQuery - Merge clone content and fadeIn

Question

I am trying to achieve this result:

Features:

• The tooltip displays instantly by pressing a button.
• FadeIn and position animation start at the same time , and then, until the position animation, the element disappears .
• Several prompts can be seen immediately (in case two or more buttons are pressed briefly one after another)
• The content of the message is taken from a dynamic JSON object.

I can duplicate and display the onclick tooltip, but for some reason I couldn’t animate it or replace it with content.

I do not understand how I can select a new duplicate item.

See the error example below or jsFiddle .

html :

<div id="ptsAlert"> <span class="ptsAlert"> message <div class="ptsAlert-arrow"></div> </span> </div> <table> <tr> <td class="btn">01</td> <td class="btn">02</td> <td class="btn">03</td> </tr> <tr> <td class="btn">04</td> <td class="btn">05</td> <td class="btn">06</td> </tr> </table> 

CSS

 h1 { font-size:50px; margin:10px; } body { text-align:center; } td { border: 1px solid; padding: 5px; cursor: pointer; } .ptsAlert { display:none; background-color: #EE0000; color: #FFFFFF; font-size: 27px; font-weight: bold; line-height: 1.7em; margin: 10px auto; padding: 0 10px; position: absolute; text-align: center; } .ptsAlert-arrow{ border-color: #EE0000 transparent transparent; border-style: solid; border-width: 8px; bottom: -15px; height: 0; left: 3px; position: absolute; width: 0; } 

JQuery

 //Function to show points alerts $('.btn').click(function(event) { var points = 10; $('#ptsAlert').clone(true, true).contents() .appendTo('body') .css('top', (event.pageY - 75) + 'px') .css('left', (event.pageX - 10) + 'px') .css('display', 'inline-block') //.hide().fadeIn(); }); 

The commented line .hide().fadeIn() causes the following error:

 NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle] 

Answer 1

 //Function to show points alerts $('.btn').click(function(event) { $('#ptsAlert').find("> span").clone(true, true) .css('top', (event.pageY - 75) + 'px') .css('left', (event.pageX - 10) + 'px') .css('display', 'inline-block') .appendTo($('body')) .hide().fadeIn(); //this line doesn't break the code (anymore) }); 

optimized

  var $body=$(document.body); var $ps=$("#ptsAlert"); var $tltp = $ps.find(">span"); $body.on("click",".btn",function(event) { $tltp.clone(true, true) .css('top', (event.pageY - 75) + 'px') .css('left', (event.pageX - 10) + 'px') .css('display', 'inline-block') .appendTo($body) .hide().fadeIn(); });