title: Creating a Hovercard with jQuery Hovercard and custom data attributes
body: <p>I need some help about creating more HoverCards with <a href="http://designwithpc.com/Plugins/Hovercard" rel="nofollow">this plugin</a> (<a href="http://dl.dropbox.com/u/40036711/jquery.hovercard.min.js" rel="nofollow">download</a>). I just created a code demo on <a href="http://jsfiddle.net/love4all1080/rLwkJ/" rel="nofollow">JSFiddle</a>. Do you have any recommendations about this?</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$('.babe-hover').hovercard({ 
      detailsHTML: $(this).attr('data-control').html(),
      width:278 
  }); 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;ul class="demo"&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;&lt;span class="babe-hover" data-control="control-01"&gt;William Johnson&lt;/span&gt;&lt;/a&gt;
      &lt;div id="control-01" style="display: none;"&gt;
          &lt;p class="s-desc"&gt;Address: 64 Newman Street.&lt;/p&gt;
          &lt;ul class="s-stats"&gt;
              &lt;li&gt;Tweets&lt;br&gt;&lt;span class="s-count"&gt;1337&lt;/span&gt;&lt;/li&gt;     
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;&lt;span class="babe-hover" data-control="control-02"&gt;Hanson Thomas&lt;/span&gt;&lt;/a&gt;
      &lt;div id="control-02" style="display: none;"&gt;
          &lt;p class="s-desc"&gt;Address: 64 Newman Street.&lt;/p&gt;
          &lt;ul class="s-stats"&gt;
              &lt;li&gt;Tweets&lt;br&gt;&lt;span class="s-count"&gt;1337&lt;/span&gt;&lt;/li&gt;     
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>​</p>