title: jQuery - Combine clone contents and fadeIn
body: <p>I'm trying to achieve this result:</p>
  
  <p><img src="https://i.stack.imgur.com/AyXYH.gif" alt="tooltip"></p>
  
  <p>Features:    </p>
  
  <ol>
  <li><strong>Tooltip shows instantly</strong>, on click.</li>
  <li><strong>FadeIn and position animation starts at same time</strong>, and then, still while animating position, the element <strong>fades out</strong>.</li>
  <li><strong>Several tooltips can be visible at once</strong> (in case two or more buttons are clicked shortly one after another)</li>
  <li><strong>Message content is taken from a dynamic JSON object.</strong></li>
  </ol>
  
  <p>I'm able to duplicate and display the tooltip onclick, but for some reason <strong>unable to animate it</strong>, or replace it's content.</p>
  
  <p><strong><em>I don't get how can I select the new duplicated element.</em></strong> </p>
  
  <p>See example error below, or <strong><a href="http://jsfiddle.net/VrCHR/1/" rel="nofollow noreferrer">jsFiddle</a></strong>.</p>
  
  <p><strong>html</strong>: </p>
  
  <pre><code>&lt;div id="ptsAlert"&gt;
      &lt;span class="ptsAlert"&gt;
          message
          &lt;div class="ptsAlert-arrow"&gt;&lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td class="btn"&gt;01&lt;/td&gt;
          &lt;td class="btn"&gt;02&lt;/td&gt;
          &lt;td class="btn"&gt;03&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="btn"&gt;04&lt;/td&gt;
          &lt;td class="btn"&gt;05&lt;/td&gt;
          &lt;td class="btn"&gt;06&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt; 
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>//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();
  });
  </code></pre>
  
  <p>The commented line <code>.hide().fadeIn()</code>produces the following error:</p>
  
  <pre><code>NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]
  </code></pre>