给你的HTML5应用添加一个漂亮的Tooltip

最新推荐文章于 2024-08-12 08:37:43 发布

Soloman

最新推荐文章于 2024-08-12 08:37:43 发布

阅读量5k

点赞数

分类专栏： HTML5/CSS/JavaScript 文章标签： html5 stylesheet dropdown header class div

HTML5/CSS/JavaScript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这篇文章对应的教程来自于《Lynda.Create.a.Tooltip.with.jQuery.and.Dreamweaver》，本文仅做一些简单的描述性说明，用来指导如何一步步添加一个漂亮的Tooltip。

原始文件

首先我们来看看我们的源文件：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery Dropdown Menus</title>
		<link rel="stylesheet" type="text/css" href="includes/tooltip.css" />
		<script type="text/javascript" src="includes/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="includes/tooltip.js"></script>
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<link rel="stylesheet" type="text/css" href="includes/tooltip_ie.css" />
		<![endif]-->
	</head>
	<body>
		<div class="page">
			<header>
				<a class="logo" href="#"></a>
			</header>
			<article>
				<h1>Heading</h1>
				<aside>
					<h2>Aside Heading</h2>
					<p>Lorem ipsum dolor sit amet consectetur <a href="#">HTML-based tooltip</a> adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
				</aside>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a href="#">text-based tooltip</a> laboris nisi ut aliquip consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<div class="clear-all"></div>
			</article>
			<footer>Your company name.</footer>
		</div>
	</body>
</html>

现在我们可以对除Tooltip以外的内容编写样式，如tooltip.css：

/*  CSS Document                             */
/*  Written by Chris Converse for lynda.com  */

/* Style */
body { font: 12px Arial; margin: 0px; padding: 0px 20px; background-color: #03658b; }
h1 { margin: 0 0 1em 0; color: #03658a; font-size: 1.7em; font-weight: normal; }
h2 { margin: 0 0 .5em 0; color: #03658a; font-size: 1.3em; }
p { margin: 0 0 1em 0; line-height: 1.5em; }
a { color: #00a8ff; text-decoration: none; }
aside p { color: #777; }
footer { font-size: .9em; }

/* Layout */
.page { max-width: 980px; #width: 980px; margin: 0px auto; padding: 0px; }
header { position: relative; height: 28px; margin: 0px; padding-top: 60px; background: url(../images/banner.jpg) no-repeat 50% 0px; }
header a.logo { width: 120px; height: 50px; position: absolute; top: 15px; left: 15px; background: url(../images/logo.png) no-repeat 0px 0px; display: block; }
nav { background-color: rgba(0,0,0,.4); }
article { margin: 0px; padding: 25px; background-color: #fff; }
aside { width: 200px; float: right; margin: 0px 0px 10px 40px; padding: 0px 0px 0px 20px; border-left: 2px solid #ccc; }
aside p { margin: 0px; }
footer { border-top: 1px solid #ddd; margin: 0px; padding: 10px 25px 10px 10px; color: rgba(255,255,255,.4); }
.clear { clear: both; line-height: 1px; }


/* Tooltip */

其余内容暂未设置。

添加Tooltip

现在我们开始添加我们的Tooltip，我们使用一个div来表示我们的Tooltip，我们在Html的footer之后加入：

			<div id="tooltip_container">Tooltip内容</div>

并且我们在tooltip.css后为tooltip_container这个div添加样式：

#tooltip_container {
	color: #fff;
	position: absolute;
	padding: 20px;
	max-width: 200px; /* need i.e. rule */
	background-color: rgba(0,0,0,.85);
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}

此时我们能够看到一个漂亮的圆角矩形的半透明区域，这就是我们今后的tooltip了，我们暂时通过设置display: none让tooltip不可见。

显示Tooltip内容

现在我们对我们的a标签添加class、data-tip-type、data-tip-source三个属性（这些属性在最终的文件中会展示出来），并且开始编写我们的javascript事件处理函数：

$(function(){
	$(".tooltip").mouseover(
		function(e){
			if ($(this).attr("data-tip-type") == "text") {
				$("#tooltip_container").html($(this).attr("data-tip-source"));		
				$("#tooltip_container").css("display", "block");
			}
	});	
	
	$(".tooltip").mouseout(
        function(e){
			if ($(this).attr("data-tip-type") == "text") {
				$("#tooltip_container").css("display", "none");
			}
    });
});

OK，现在我们能够在鼠标移动到a标签上时显示我们的Tooltip窗口并且移出时消失窗口了，但位置还是不对，我们需要做一下修改，我们添加mousemove事件处理函数：

	$(".tooltip").mousemove(
		function(e){
			var tooltipWidth = $('#tooltip_container').outerWidth();
			var tooltipHeight = $('#tooltip_container').outerHeight();
	
			// width detection
			var pageWidth = $('body').width();
			if ( e.pageX > pageWidth / 2 ){
				$('#tooltip_container').css('left',( e.pageX - tooltipWidth + 20 ) + 'px');
			}else{
				$('#tooltip_container').css('left',( e.pageX - 20 ) + 'px');
			}
			
			// height detection
			if ( e.pageY > 100 ){
				$('#tooltip_container').css('top',( e.pageY - (tooltipHeight+20) ) + 'px' );
			}else{
				$('#tooltip_container').css('top',( e.pageY + 20 ) + 'px' );
			}
			
			/* debug */ $('.bodywidth').html( pageWidth );
			/* debug */ $('.xpos').html(e.pageX);
			/* debug */ $('.ypos').html(e.pageY);
		}
	);

至此，我们的文字版的Tooltip已经全部完成了。

添加HTML内容的Tooltip

为了实现可以内置图片等资源的tooltip，我们将tooltip内容放置在一个div中，需要显示的时候将这个区域显示到刚才文字显示的区域就好了。

完成后的代码如下：

html页面

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery Dropdown Menus</title>
		<link rel="stylesheet" type="text/css" href="includes/tooltip.css" />
		<script type="text/javascript" src="includes/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="includes/tooltip.js"></script>
		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<link rel="stylesheet" type="text/css" href="includes/tooltip_ie.css" />
		<![endif]-->
	</head>
	<body>
		<div class="page">
			<header>
				<a class="logo tooltip" data-tip-type="text" data-tip-source="This is the logo" href="#"></a>
			</header>
			<article>
				<h1>Heading</h1>
				<aside>
					<h2>Aside Heading</h2>
					<p>Lorem ipsum dolor sit amet consectetur <a class="tooltip" data-tip-type="html" data-tip-source="tooltip-sidebar" href="#">HTML-based tooltip</a> adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
				</aside>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco <a class="tooltip" data-tip-type="text" data-tip-source="This is the text for tooltip." href="#">text-based tooltip</a>  laboris nisi ut aliquip consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<div class="clear-all"></div>
			</article>
			<footer>Your company name.</footer>
			<div id="tooltip_container">Tooltip内容</div>
            
			<div class="tooltip-source-html">
				<div id="tooltip-sidebar">
					<img src="images/lynda.gif" style="float:left;">
					This is a tip that has <strong><em style="color:#ffe19a;">HTML-formatted</em></strong> content, including an image.
					<div class="clear-all"></div>
				</div>
			</div>
            
		</div>
	</body>
</html>

CSS文件

/*  CSS Document                             */
/*  Written by Chris Converse for lynda.com  */

/* Style */
body { font: 12px Arial; margin: 0px; padding: 0px 20px; background-color: #03658b; }
h1 { margin: 0 0 1em 0; color: #03658a; font-size: 1.7em; font-weight: normal; }
h2 { margin: 0 0 .5em 0; color: #03658a; font-size: 1.3em; }
p { margin: 0 0 1em 0; line-height: 1.5em; }
a { color: #00a8ff; text-decoration: none; }
aside p { color: #777; }
footer { font-size: .9em; }

/* Layout */
.page { max-width: 980px; #width: 980px; margin: 0px auto; padding: 0px; }
header { position: relative; height: 28px; margin: 0px; padding-top: 60px; background: url(../images/banner.jpg) no-repeat 50% 0px; }
header a.logo { width: 120px; height: 50px; position: absolute; top: 15px; left: 15px; background: url(../images/logo.png) no-repeat 0px 0px; display: block; }
nav { background-color: rgba(0,0,0,.4); }
article { margin: 0px; padding: 25px; background-color: #fff; }
aside { width: 200px; float: right; margin: 0px 0px 10px 40px; padding: 0px 0px 0px 20px; border-left: 2px solid #ccc; }
aside p { margin: 0px; }
footer { border-top: 1px solid #ddd; margin: 0px; padding: 10px 25px 10px 10px; color: rgba(255,255,255,.4); }
.clear { clear: both; line-height: 1px; }


/* Tooltip */
#tooltip_container {
	color: #fff;
	position: absolute;
	display: none;	
	padding: 20px;
	max-width: 200px; /* need i.e. rule */
	background-color: rgba(0,0,0,.85);
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
}


.tooltip-source-html{
	display: none;
}

js文件

/*  JavaScript Document                      */
/*  Written by Chris Converse for lynda.com  */

$(function(){
	$(".tooltip").mouseover(
		function(e){
			if ($(this).attr("data-tip-type") == "text") {
				$("#tooltip_container").html($(this).attr("data-tip-source"));	
			}
			
			if ($(this).attr("data-tip-type") == "html") {
				// 得到该a标签设置的data-tip-source数据源，这个数据源指定的html页面中嵌入的tooltip对象的id
				var tooltip = "#" + $(this).attr("data-tip-source");
				var html = $(tooltip).html();
				$("#tooltip_container").html(html);		
			}
			
				
			$("#tooltip_container").css("display", "block");
	});	
	
	$(".tooltip").mousemove(
		function(e){
			var tooltipWidth = $('#tooltip_container').outerWidth();
			var tooltipHeight = $('#tooltip_container').outerHeight();
	
			// width detection
			var pageWidth = $('body').width();
			if ( e.pageX > pageWidth / 2 ){
				$('#tooltip_container').css('left',( e.pageX - tooltipWidth + 20 ) + 'px');
			}else{
				$('#tooltip_container').css('left',( e.pageX - 20 ) + 'px');
			}
			
			// height detection
			if ( e.pageY > 100 ){
				$('#tooltip_container').css('top',( e.pageY - (tooltipHeight+20) ) + 'px' );
			}else{
				$('#tooltip_container').css('top',( e.pageY + 20 ) + 'px' );
			}
			
			/* debug */ $('.bodywidth').html( pageWidth );
			/* debug */ $('.xpos').html(e.pageX);
			/* debug */ $('.ypos').html(e.pageY);
		}
	);
	
	$(".tooltip").mouseout(
        function(e){
			$("#tooltip_container").css("display", "none");
    });
});