[翻译] Simple Tooltip with jQuery & CSS

现在有很多提示插件，但是却有很少去解释一个提示工具的实现逻辑。今天我想分享我创建的提示插件，欢迎大家提出意见和建议，接下来让我们一起看看。

在线Demo

标记 - HTML
我想尽可能保持标记简单，但又足够的灵活，以适应不同的场景。主链接将通过添加 class="tip_trigger" 来启动提示，通过 class="tip"来保存在提示内容，例如：

[code lang="html"]
<a href="#" class="tip_trigger">Your Link Key Word
<span class="tip">This will show up in the tooltip</span>
</a>
[/code]
样式 - CSS
样式很简单，我想鼓励你创建与你项目相关的样式。
提示工具默认是隐藏的，当你在它上面悬停时由jQuery触发显示。
我们给它一个绝对位置和一个z-index="1000"属性，以确保它在你的元素之上停留。

[code lang="html"]
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute;
z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
[/code]
魔术 - jQuery
对于那些不熟悉jQuery的朋友，建议你们先去JQuery的网站了解一下它是如何工作的。我之前也分享了一些技巧，你们也可以去看看。

起步 - 引用 jQuery 文件

您可以选择下载jQuery文件，或者使用在谷歌托管的jQuery文件。

[code lang="js"]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">
</script>
[/code]

紧接着上面，另起一行 script 标记，通过 $(document).ready 事件来开始你的代码，它将保证你的代码在dom元素准备好之后运行。

[code lang="js"]
$(document).ready(function() {
$(".tip_trigger").hover(function(){
$(this).find('.tip').show(); //Show tooltip
}, function() {
$(this).find('.tip').hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = $(this).find('.tip').width(); //Find width of tooltip
var tipHeight = $(this).find('.tip').height(); //Find height of tooltip

//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom edge of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);

if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport (Exceeds the right side of viewport)
mousex = e.pageX - tipWidth - 20; //Set new X coordinate
$(this).find('.tip').css({ top: mousey, left: mousex }); //Move tooltip element to the left side
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport (Exceeds the bottom of the viewport)
mousey = e.pageY - tipHeight - 20; //Set new Y coordinate
$(this).find('.tip').css({ top: mousey, left: mousex }); //Move tooltip element on top
} else { //By Default have the tooltip on the bottom right
$(this).find('.tip').css({ top: mousey, left: mousex });
}
});
});
[/code]
实现逻辑：


1、悬停入和悬停出触发区域

当悬停入触发区域时显示 .tip，悬停出时隐藏 .tip
2、鼠标滑过

当鼠标进入触发区域, 开始通过 e.pageX and e.pageY来获取你鼠标的X和Y坐标。 注意，我们给鼠标点和提示之间留了20px的空间。
3、设置变量

我们考虑到了如果提示工具的X和Y坐标超出了屏幕的情况，当这种情况发生时我们将提示工具反向显示。为了获取新的坐标位置，我们必须拿到提示工具的宽度和高度 (tipWidth and tipHeight)。如果检测到提示工具超出了屏幕，我们会从屏幕的宽度和高度重减去X坐标和Y坐标的宽度和高度
4、如果提示工具，超出了屏幕的宽

如果提示工具超出了屏幕的宽，我们将把提示工具显示在鼠标的左侧，我们通过鼠标的X坐标位置减去提示工具的宽度来计算显示位置。
5、如果提示工具，超出了屏幕的高

如果提示工具超出了屏幕的高，我们将把提示工具显示在鼠标的上方，我们通过鼠标的Y坐标位置减去提示工具的高度来计算显示位置。
6、默认情况下

如果提示工具没有超出屏幕的宽和高，我们就在鼠标的下方显示提示工具。


原文地址：http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/