Use jQuery to implement @ ID floating display of comments in WordPress _ jquery

This article mainly introduces how to use JavaScript to implement the function of displaying comments by ID in WordPress, that is, to display the subject content of the comments in the building-style comments. For more information, see: A left A message and B replied to A with @, so B's reply may be like this:

@
How much money do you have?

That is to say, when you hover the mouse over @ A, the comment of A will be displayed in A floating area.

Steps
Here we will take the iNove topic as an example.
1. Save the following code as commenttips. js:

jQuery(document).ready( function(){ var id=/^#comment-/; var at=/^@/; jQuery('#thecomments li p a').each(  function() {  if(jQuery(this).attr('href').match(id)&& jQuery(this).text().match(at)) {   jQuery(this).addClass('atreply');  }  } ); jQuery('.atreply').hover(  function() {  jQuery(jQuery(this).attr('href')).clone().hide().insertAfter(jQuery(this).parents('li')).attr('id','').addClass('tip').fadeIn(200);  },   function() {  jQuery('.tip').fadeOut(400, function(){jQuery(this).remove();});  } ); jQuery('.atreply').mousemove(  function(e) {  jQuery('.tip').css({left:(e.clientX+18),top:(e.pageY+18)})  } ); })

2. Place the commenttips. js file in the inove/js directory.

3. the append style code in style.css is as follows:

#thecomments .tip { background:#FFF; border:1px solid #CCC; width:605px; padding:10px !important; padding:10px 10px 0; margin-top:0; position:absolute; z-index:3;}#thecomments .tip .act { display:none;}*+html #thecomments .tip { padding:10px 10px 0 !important;}

4. add code in the topic to call JavaScript. open templates/end. phpAdd the following code in the previous line:
(If you have other plug-ins or you have added jQuery libraries, you do not need to add the first line of code .)