文章导读：在新的一年中，各位网友都进入紧张的学习或是工作阶段。网学的各位小编整理了网络知识-WordPress 正文链接添加tooltips 教程的相关内容供大家参考，祝大家在新的一年里工作和学习顺利！
什么都先别说，因为这个名字又是鄙人杜撰的，先看看是什么东西吧。把鼠标放上来试试：泡泡提示。
哈哈，是不是很讨人喜欢~嗯，首先讲讲这个功能有什么用处吧。就我而言，我经常在写博客的时候要引出一些新术语，而这些新术语专门用一段话描述又觉得冗长，不描述又有些突兀，所以这个泡泡提示功能就很派对上用场了。除了添加注释外，此功能对一切超链接都具有解释功能哦~但我个人认为全屏是“泡泡提示”也显得过于花哨了，所以我只在正文里添置提示功能。
当然这个功能不是我原创的，是因为刚刚我浏览一个讨论CSS和HTML5绚丽效果的网站，上面就有个“泡泡”特效，我就把它搬到了WordPress中，也算一点小贡献~大家喜欢可以一起玩。
一：原理
当我们把鼠标移到一个超链接的时候，不知道你有没有注意到，会在鼠标边上会有一些注释，不信你可以把鼠标放在我博客的侧边栏下面有个彩色的标签，随便把鼠标放到其中一个标签上，是不是像我说的那样呢?其实我们的工作原理很简单，相当于给这些本来没有修饰的提示信息添加上绚丽的效果。如果你想定制个性些的提示样式，你需要懂一点JS，JQuery以及CSS，当然如果你也可以直接下载我提供的所有源码，效果就和我一模一样了。
二：CSS和JS文件
这里是CSS和JS文件。按照惯例，博主不会只给个源码，大致讲下代码的原理呗。
其中CSS自不必说，因为都是一些样式信息，主要看个人设计;而JS文件呢，简单的来说就是为你指定的所有带title属性的标签提供一个隐藏泡泡，当鼠标放到该超链接上时，把该隐藏的泡泡弹出来，原作者在写JS代码的时候有点Bug，因为他用了页面元素的相对位置，当你的页面比较复杂时，几乎难以定位，所以我把它们全部改成了绝对定位~我测试了一下，没发现问题。还有一个是显示层次问题，原作者也没有考虑到，可见高手也会百密一疏，我也修正了一下。
把这两个文件放到你的主题目录下，如果你是个小白，我建议你放在主题目录的JS和CSS文件目录下，没有就新建一个。
三：修改Header.php文件
最后我们只需要修改Header.php文件即可。在该文件的前添加如下代码：
/*包含CSS文件，可以是绝对地址也可以相对位置*/
<link rel="stylesheet" href="css/tooltips.css">
/*包含JQuery库，其实你可以看看你的Header文件中是否已经包含它，不必包含两次*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
/*同CSS*/
<script type="text/javascript" src="js/tooltips.js"></script>
/*值得注意的.entry-content这个值，这个函数的意思是让该类下的所有a标签都具有泡泡提示功能；如果你想让整个网站都具有泡泡，则改.entry-content为#page就可*/
<script>
$(function() {
$(".entry-content a[title]").tooltips();
});
</script>
四：搞定，试一试
那哪些文字才会有提示功能呢?最简单就是超链接，如果你不想把提示文字变成超链接，你可以删掉下划线然后把链接地址变为空即可，如下所示：
<a href="#" title="空地址且无下划线" style="text-decoration:none" >场景一</a>
<a href="http://www.ccpt.cc" title="普通链接" >场景二</a>
好了，如果一切操作没有错误的话，享受这个效果吧~
原文地址：http://www.ccpt.cc/add_bubble_tip_to_wordpress/
