tool Tip原创

2010-10-14 14:59:39 by 【6yang】, 156 visits, 收藏 | 返回

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tool Tip原创</title>
<link href="css/aa.css" rel="stylesheet" charset="" id="link01"/>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
jQuery(function(){
$(".tipTag").hover(
function(){
  var myTitle = $(this).attr("title");
  $(this).attr("title", "");
  var _xOffset = $(this).offset().left;
  var _yOffset = $(this).offset().top;
  var _oWidth = $(this).outerWidth();
  var _oHeight =$(this).outerHeight();
   $(this).data("tips",myTitle);
   $("#tooltip").append("<span>"+ myTitle +"</span>");
   $("#tooltip").css("top",(_yOffset+1) + "px").css("left",(_oWidth+_xOffset) + "px").delay(100).fadeIn("slow");

    },
function(){
  $("#tooltip").stop(true, true).text("").hide();
  $(this).attr("title", $(this).data("tips"));
  $(this).removeData("tips");
})
})
</script>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#tooltip{
color:#fff;
display:none;
background:#ff0000;
-moz-border-radius:5px;
padding:5px;
position:absolute;
}
</style>
<body>

<div id="styleModel">
<a href="#~" class="tipTag" title="内容内容内容内容内容内容内容">内容内容内容内容</a> <a href="#~" class="tipTag" title="内容内容内容内容内容内容内容">内容内容内容内容</a><br/>
<a href="#~" class="tipTag" title="内容">内容</a><br/>
<a href="#~" class="tipTag" title="内容">内容</a><br/>
<a href="#~" class="tipTag" title="内容">内容</a><br/>
<a href="#~" class="tipTag" title="内容">内容</a><br/>
</div>

分享到：

我要评论本文来自:http://www.6yang.net/articles_view.php?id=821&cid=7

share

技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

tool Tip原创

图片原图