Question

I am using this plugin for hovercards..http://designwithpc.com/Plugins/Hovercard

The problem with this plugin is when I hover over ‘A’ tags it only shows the value of the last ‘A’ tag and not the intended one and

E.g

   <a href='aaa.com'>AAA.com</a>
   <a href='bbb.com'>BBB.com</a>
   <a href= 'ccc.com>CCC.com</a>

Expected:
When I hover the link over AAA.com,it should show AAA.com,but it shows CCC.com

Code:

 <script type="text/javascript">
      $(document).ready(function () {
       var hoverHTMLDemoOpenLeft = '<p id="aa1">' +'</p>';

  $('a').hovercard({
       detailsHTML: hoverHTMLDemoOpenLeft,
       width: 600,
       cardImgSrc: 'http://ejohn.org/files/short.sm.jpg',
       onHoverIn: function () {
       var a1=$('a').attr('href');
       alert(a1)
   }
  });
}); 

The problem here is the alert message is not showing up aaa.com when you hover over AAA.com it’s showing us CCC.com And sometimes only for the first link hover is displayed but too wrongly..

Answer 1

try this:

onHoverIn: function () {
           var a1= $(this).find('a').attr('href');
           alert(a1);         
       }

Using this inside onHoverIn callback function sets scope to the (current) full hovercard div with the class of .hc-preview

Here’s the jsFiddle for the same: http://jsfiddle.net/VjHe8/