比如： A留言，B用@回复A，那么B的回复可能是这样的：

@ a你有多少钱？

也就是说，当鼠标悬停在@A上时，A的评论内容会显示在浮动区域。

实现步骤这里，我们将以iNove主题为例。1.将以下代码保存为commenttips.js:

jQuery(文档)。ready(function(){ var id=/^#comment-/；var at=/^@/；jQuery(' # components Li p a ')。每个(函数(){ if(jQuery(this))。attr('href ')。匹配(id) jQuery(this)。文本()。match(at)) { jQuery(this)。addCLaSS(' at reply ')；} } );jQuery('。a reply’)。悬停(function() { jQuery(jQuery(this))。attr('href ')。克隆()。隐藏()。insertAfter(jQuery(this))。父母(' li ')。attr('id '，' ')。addClass('tip ')。法丁(200)；}，function() { jQuery('。提示’)。fadeOut(400，function(){jQuery(this))。移除()；});} );jQuery('。a reply’)。mousemove(函数(e) { jQuery ')。提示’)。css({left:(e.clientX 18)，top :(e . pagey 18)})})；})2.将commenttips.js文件放在inove/js目录中。

3.添加到style.css的样式代码如下：

#组件。提示{ background : # FFF；border:1px固体# CCC宽度width:605pxpadding:10px！重要；padd :10 px 10px 0；保证金-top :0；位置：绝对；z索引：3；} #组件。小费。act { display:none} * html #组件。提示{ padding:10px 10px 0！重要；}4.向主题添加代码以调用JavaScript。打开templates/end.php，在before /body一行添加下面的代码：(如果有其他插件或者添加了jQuery库，就不需要添加第一行代码了。).

script type=' text/JavaScript ' src=' http :http://Ajax . googleapis.com/Ajax/libs/jquery/1 . 3 . 1/jquery . min . js '/script script type=' text/JavaScript ' src=' http :PHP bloginfo(' template _ URL ')；/js/commentatips . js '/script 5。好的，用@ reply刷新页面。加载页面后，将鼠标悬停在@ reply上，您会看到效果。

为什么不能跨页显示？因为它的工作原理是当鼠标移动到@{username}时，在这个页面上找到对应的评论，并插入到评论列表中，以绝对位置显示。如果评论不在这个页面上，找不到对象，当然没有后续处理。

如何跨页面获取评论信息？如果在这个页面上找不到对应的评论，后台查询的评论信息可以由AJAX通过评论ID返回页面。当鼠标移动到@ comment上时，“正在加载.”的提示框将向用户显示。如果操作成功，找到的注释将被插入到注释列表的后面，并且注释的内容将在“正在加载.”框中被替换。也就是说，Loaded注释将一直保留在这个页面上，所以当你再次将鼠标移动到@ comments上时，就不需要重新加载它们了。我们来看看如何处理跨页评论：

如何通过@{username}在当前页面找到相应的评论？

1.每条评论都会有一个ID，结构如： comment-{ comment tid }，这是为了方便通过锚点查找评论，也是完成@ comment tips的必要条件。2.每个@{username}实际上是一个指向注释的锚点，因此获取注释id是很自然的。

所以，很简单。如果注释ID是_ commentId，那么可以通过下面的代码在JS中找到对应的注释。

document . getelementbyid(_ comment tid)；如果能找到目标评论，创建一个隐藏的临时评论，以目标评论为内容，在@{username}的附件中显示；如果没有找到目标评论，就在后台按ID搜索对应的评论，进行跨页处理。

如何跨页面加载注释？

跨页的本质是动态加载评论，将获得的评论追加到评论列表的末尾，这样就可以在这个页面上找到评论。不同的是，这些评论不会通过CSS处理显示。

可以参考下图。如果评论不在本页，会走红色路径，在评论被加入当前页面之后，会有一个动作，将提示框的装货信息替换为评论内容。当用户在此将鼠标悬停在这个@ {用户名}时，评论已在当前页面，所以不需再次加载，而是走绿色路径，直接将评论提示框调出。

注： 图中蓝色部分是后台处理，黄色部分是整个加载过程的重点。

在后台中怎样获取评论并对其格式化？

这里可以自己写个方法对评论信息进行格式化，也可以通过评论的回调方法(WordPress 2.7或以上版本可以定义评论的回调方法)来获取格式化的超文本标记语言.

$ comment=GET _ comment($ _ GET[' id '])；custom_comments($comment，null，null)；注：自定义评论是我的回调函数的方法名。

Java脚本语言代码

基于jQuery的射流研究…代码，如果不使用或者使用其他射流研究…框架，请根据处理思路自行改造。建议将代码放置于评论列表下方。

var id=/^#comment-/；var at=/^@/；jQuery(' #组件Li p a ').每个（函数(){ if(jQuery(this)).attr('href ').匹配(id) jQuery(this).文本()。匹配(at)) { jQuery(this).addCLaSS('在回复时')；}});jQuery(' .答复').悬停(function(){ var target=this；var _ comment tid=jQuery(this).attr(' href ')；if(jQuery(_ comment tid).是('。注释'){ jQuery(' Li class='注释提示'/Li ').隐藏()。html(jQuery(_ comment tid).html()).appendo(jQuery(' # components ')；jQuery(' #组件.提示')。css({ left:jQuery().累积偏移量(本)[0] jQuery(本).宽度()10，top:jQuery().累计偏移量（此)[1] - 22 })。fadeIn()；} else { var id=_ comment tid。切片(9)；jQuery.ajax({ type: 'GET '，url: '？action=load _ commentid=' id，cache: false，dataType: 'html '，内容类型： ' application/JSON；charset=utf-8 '，BeforeSend : function(){ jQuery(' Li class=' comment tip '/Li ').隐藏()。html(' p class=' Ajax-loader msg '加载./p ').appendo(jQuery(' # components ')；jQuery(' #组件.提示')。css({ left:jQuery().累积偏移量（目标)[0] jQuery(目标)。宽度()10，top:jQuery().累计偏移量（目标)[1] - 22 })。fadeIn()；}，成功：函数（数据){ var addedComment=jQuery(数据/Li’)；addedComment.hide().appendo(jQuery(' # components ')；jQuery(' #组件.提示')。html(添加了注释。html())；}，错误： function(){ jQuery(' # components .提示')。html('p class='msg'Oops，未能加载数据/p’；} });}}，function(){ jQuery(' # components .提示')。fadeOut(400，函数(){ jQuery(this)).移除();});});服务器端编程语言(专业超文本预处理器的缩写)代码

这段代码来自PhilNa2主题，建议将代码追加到function.php .

函数load _ comment(){ if($ _ GET[' action ']==' load _ comment ' $ _ GET[' id ']！=' '){ $ comment=GET _ comment($ _ GET[' id '])；if(！$comment) { fail(printf('呜呜！找不到编号为%1$s '，$_GET['id'])的注释);} custom_comments($comment，null，null)；die()；}}add_action('init '，' load _ comment ')；