使用Tooltip简单实现title浮动提示样式

gyue2345·2016-02-04·178 次阅读··

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 title 属性存储标题信息。

引入jQuery

这个Tooltip是我从别的网站上扒下来的，下面是代码。因为Tooltip是jQuery的控件，所以要在使用前引入jQuery库。

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

引入css

css样式表，如果是wordpress的话，你可以加到style.css里去。

#tooltip {
	background: #DDD;
	color: #000000;
	text-align: center;
	margin-right: 10px;
	position: absolute;
	z-index: 9999;
	display: none;
	box-shadow: 0 0 5px #666;
	border: 1px dashed #FFF;
	padding: 3px 8px;
	font-size: 12px;
}

引入JS

下面就是javascript代码

	$(function() {
    $("a").each(function(b) {//这里是控制标签
        if (this.title) {
            var c = this.title; //把title的赋给自定义属性 myTilte ，屏蔽自带提示
            var a = 30; //设置提示框相对于偏移位置，防止遮挡鼠标
            $(this).mouseover(function(d) { //鼠标移上事件
                this.title = "";
                $("body").append('<div id="tooltip">' + c + "</div>"); //创建提示框,添加到页面中
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px",
                    opacity: "0.8"
                }).show(250) //设置提示框的坐标，并显示
            }).mouseout(function() { //鼠标移出事件
                this.title = c; //重新设置title
                $("#tooltip").remove() //移除弹出框
            }).mousemove(function(d) { //跟随鼠标移动事件
                $("#tooltip").css({
                    left: (d.pageX + a) + "px",
                    top: d.pageY + "px"
                })
            })
        }
    })
	});

这些添加完成之后，这个漂亮的Tooltip title浮动提示条就可以在你的博客上运行了。。。 :!: