给超链接添加漂亮的Sweet Titles效果代码版

yMoo主题是目前我最喜欢的主题，而且也是最稳定的一款，都一个月了才更新。当然不是没有问题，只是本人一懒二忙也就没及时更新，是在对不住了。刚刚已经更新完毕，荒淫大家围观[点此穿越]。

zou.lu的Sweet Titles插件做的不错，但是插件嘛，越少越好，我也就没用了。前段时间帮人做主题，觉得这样的效果就很不错，所以就抠出来分享一下，同时也做个笔记吧。并且已经应用于yMoo主题。看图：

超链接浮动窗口JQ效果

这样的效果我想很多人都见过的，菜鸟级别，老鸟就飞过吧！

下面开始动手：

1、下载此JS代码插件，并在</head>前调用此插件

1	<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/plugins.js"></script>

2、在</head>前再添加如下代码

<script type="text/javascript">
$(document).ready(function() {
$("a").addClass("tooltip"); //给所有的a标签添加class属性
$(".tooltip").tipTip({delay:0, defaultPosition:"top", maxWidth:"100px"}); //对class为tooltip并由title值的的链接添加JQ特效
});
</script>

3、添加CSS样式

/* TipTip CSS - Version 1.2 */
#tiptip_holder {display: none;position: absolute;top: 0;left: 0;z-index: 99999;}
#tiptip_holder.tip_top {padding-bottom: 5px;}
#tiptip_holder.tip_bottom {padding-top: 5px;}
#tiptip_holder.tip_right {padding-left: 5px;}
#tiptip_holder.tip_left {padding-right: 5px;}
#tiptip_content {font-size: 11px;color: #fff;text-shadow: 0 0 2px #000;padding: 4px 8px;border: 1px solid rgba(255,255,255,0.25);background: rgb(25,25,25);background: rgba(25,25,25,0.92);background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;box-shadow: 0 0 3px #555;-webkit-box-shadow: 0 0 3px #555;-moz-box-shadow: 0 0 3px #555;}
#tiptip_arrow, #tiptip_arrow_inner {position: absolute;border-color: transparent;border-style: solid;border-width: 6px;height: 0;width: 0;}
#tiptip_holder.tip_top #tiptip_arrow {border-top-color: #fff;border-top-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_bottom #tiptip_arrow {border-bottom-color: #fff;border-bottom-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_right #tiptip_arrow {border-right-color: #fff;border-right-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_left #tiptip_arrow {border-left-color: #fff;border-left-color: rgba(255,255,255,0.35);}
#tiptip_holder.tip_top #tiptip_arrow_inner {margin-top: -7px;margin-left: -6px;border-top-color: rgb(25,25,25);border-top-color: rgba(25,25,25,0.92);}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {margin-top: -5px;margin-left: -6px;border-bottom-color: rgb(25,25,25);border-bottom-color: rgba(25,25,25,0.92);}
#tiptip_holder.tip_right #tiptip_arrow_inner {margin-top: -6px;margin-left: -5px;border-right-color: rgb(25,25,25);border-right-color: rgba(25,25,25,0.92);}
#tiptip_holder.tip_left #tiptip_arrow_inner {margin-top: -6px;margin-left: -7px;border-left-color: rgb(25,25,25);border-left-color: rgba(25,25,25,0.92);}

4、搞定！

是不是很简单？赶紧试试吧！