多年来我使用了一些不同的工具提示插件,但我认为现在是编写自己的插件的时候了。简单地说,我不是在寻找一个拥有所有选项的插件,因为我知道我希望每个工具提示都能弹出来看起来和行为。大多数插件都有一系列动画和位置可供使用,我认为这对于我想要创建的轻量级插件来说太过分了,当然有你的帮助:)
基本上,使用悬停的title属性,我希望工具提示直接显示在正在悬停的元素上方并居中。
我知道如何填充将要显示的div,但是我想要解决的是如何告诉div将自己定位在元素的正上方。
理想情况下,这是用最少的代码完成的。我的逻辑说的是这样的(伪代码):
<html>
<head>
<style type="text/css">
#myToolTip { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.hoverAble').hover(function(){
var tip = $(this).attr('title');
$('#myToolTip').html(tip).fadeIn();
}, function() {
$('#myToolTip').fadeOut();
}
});
</script>
</head>
<body>
<div id="myToolTip"></div>
<div class="hoverAble" title="I am good at code"></div>
</body>
</html>
当然上面的代码只是填充工具提示而不是相对于悬停元素定位。那是我的理解不足的地方。你能帮忙吗?
编辑:为了澄清,我不想让工具提示随鼠标移动。
答案 0 :(得分:5)
查看jQuery中的各种CSS functions,主要是offset()
,也许是height()
。
// pseudocode, assuming #tooltip has position: absolute
// do something similar with the left offset as well
$('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });
这会将工具提示静态地放在链接上或接近链接,我认为这是您正在寻找的。如果您希望工具提示随鼠标移动,则需要动态更新mousemove事件中的位置。
答案 1 :(得分:3)
<div title="This is tooltip">Hover Me</div>
这个简单的工具提示对我有用。你可以添加任何课程,使其时尚。
答案 2 :(得分:1)
如果没有特定的代码示例,您可以查看事件对象的内容(我假设您在onmouseover事件中执行此操作)。
您的clientX和clientY属性应该有帮助
查看以下事件对象:
答案 3 :(得分:1)
我认为这可能对你有所帮助。
<html>
<head>
<style type="text/css">
#myToolTip { display: none;position:absolute; }
</style>
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hoverAble').hover(function(e){
var left = mouseX(e);
var top = mouseY(e);
var tip = $(this).attr('title');
$('#myToolTip').css('top',top);
$('#myToolTip').css('left',left);
$('#myToolTip').html(tip).fadeIn();
}, function() {
$('#myToolTip').fadeOut();
})
});
鼠标位置:
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else return null;
}
</script>
</head>
HTML:
<body>
<div id="myToolTip"></div>
<div class="hoverAble" title="I am good at code">hi catch me</div>
</body>
</html>
答案 4 :(得分:0)
最容易使用内置的jQuery.UI工具提示之一。
$(document).tooltip();
在html中,所有“标题”标签都转向工具提示...
<div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>