jQuery的工具提示/移动鼠标移动/提示用鼠标位置
的jQuery Tools tooltip是OK的我!jQuery的工具提示/移动鼠标移动/提示用鼠标位置
但我想它用鼠标移动(相对于鼠标位置提示)移动。我怎样才能做到这一点?或者是否有这种方式的其他插件?
我不认为这是可能与jQuery的工具提示插件做。
的Bassistance Tooltip plugin不支持你想要什么。使用track: true
,如this demo:
$('#yahoo a').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
fade: 250
});
如果你不喜欢这样的插件,qTip2也支持鼠标跟踪。见this demo(相当于jsFiddle here)。
$('#demo-mouse').qtip({
content: 'I position myself at the current mouse position',
position: {
my: 'top left',
target: 'mouse',
viewport: $(window), // Keep it on-screen at all times if possible
adjust: {
x: 10, y: 10
}
},
hide: {
fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
},
style: 'ui-tooltip-shadow'
});
请参阅下面的最高优先答案http://*.com/a/15163105/4047679 – raphael 2015-12-10 04:51:14
我这样做与jQuery工具提示
$('#selector').mousemove(function(e) {
$('.tooltip').css('left', e.pageX + 5).css('top', e.pageY - 25).css('display', 'block');
})
其中.tooltip是CSS类
jQuery用户界面现在包括一个.tooltip()
widget作为1.9版本,它现在提供的选项track: true
使工具提示跟随鼠标。只是初始化窗口小部件时指定它作为一个选项:
$(document).tooltip({
track: true
});
这里看到这个动作:http://jqueryui.com/tooltip/#tracking
此,如果您已经使用jQuery UI,并且不希望包括其他图书馆是非常有用的。退房的API为更多细节这个小工具:http://api.jqueryui.com/tooltip/
这应该是现在选择的答案。自从这个问题最初得到解答以来,本机工具提示已经取得了很多进展。 – theblang 2013-04-06 22:26:30
HTML
<div id="tooltipWindow" class="tooltipContainer">
<div></div>
</div>
CSS(只要你想添加的样式,在下面的脚本我还加附元素的类到工具提示div)
<style>
.tooltipContainer {
position: fixed;
height: auto;
width: auto;
background: ghostwhite;
padding: 10px;
}
</style>
JAVASCRIPT(jQuery的,不要忘了包括jQuery库,我已经加入了包括标签以及)
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script>
//Following Tooltip
$('.elementClassName').mousemove(function(e) {
if ($(this).attr('title') != "") {
$('#tooltipWindow div').html($(this).attr('title'));
$('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
$('#tooltipWindow').show();
}
});
$('.elementClassName').mouseleave(function (e) {
$('#tooltipWindow').hide();
});
}
//Non Following Tooltip
$('.elementClassName').hover(function(e) {
if ($(this).attr('title') != "") {
$('#tooltipWindow div').html($(this).attr('title'));
$('#tooltipWindow').css('left', e.clientX + 10).css('top', e.clientY + 10).addClass($(this).attr('class'));
$('#tooltipWindow').show();
}
},function (e) {
$('#tooltipWindow').hide();
});
}
</script>
$(function(){ window.onmousemove = function (e) { var tooltips = $('div.ui-tooltip'); var x = (e.clientX + 10) + 'px', y = (e.clientY + 10) + 'px'; for (var i = 0; i < tooltips.length; i++) { tooltips[i].style.top = y; tooltips[i].style.left = x; } }; });
如果使用jQuery的UI提示,该代码片段会做的伎俩!
IMO,你应该接受空性的答案。原生jQuery工具提示已经看到了很多进展,因为这个问题最初得到了回答。 – theblang 2013-04-06 22:27:44