Creating a Hovercard with jQuery Hovercard and custom data attributes - jquery-plugins

Question

I need some help about creating more HoverCards with this plugin (download). I just created a code demo on JSFiddle. Do you have any recommendations about this?
JavaScript:
$('.babe-hover').hovercard({
detailsHTML: $(this).attr('data-control').html(),
width:278
});
HTML:
<ul class="demo">
<li>
<span class="babe-hover" data-control="control-01">William Johnson</span>
<div id="control-01" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
<li>
<span class="babe-hover" data-control="control-02">Hanson Thomas</span>
<div id="control-02" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
​

Answer 1

Now it working with some help from the author
$('.babe-hover').each(function(){
var $this = $(this),
myControlId = $this.attr('data-control'),
htmlForHovercard = $('#'+ myControlId).html();
$this.hovercard({
detailsHTML: htmlForHovercard,
width:278
});
});
anyway thank #egasimus for ur suggest :)

Answer 2

I suppose you're asking: why doesn't this work?
You're trying to call the .html() method on what $(this).attr('data-control') returns. $(this).attr('data-control'), however, only returns a string, and you need to obtain the corresponding element in order to use .html(). The following code works for me:
$("#" + $(this).attr('data-control')).html()
I.e., "select the element whose id equals this element's data-control attribute, and call .html() on it."