我正在使用这个 jQuery this元素中的工具提示。
问题是当我有很多东西出现在隐藏的工具提示 (div) 中时。发生这种情况时,div 高度会变大,无法容纳在屏幕中,因此它会在屏幕下方,无法读取部分 div。
我想让 div 出现在鼠标指针的中间,而不是指针的右下角。
这可能吗?
编辑:
这是 jQuery 代码
/*=========================Tooltip NOT MINE===================================*/
//Select all anchor tag with rel set to tooltip
$('a[rel=tooltip]').mouseover(function() {
//Grab the title attribute's value and assign it to a variable
var tip = $(this).attr('title');
//Remove the title attribute's to avoid the native tooltip from the browser
$(this).attr('title','');
//Append the tooltip template and its value
$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');
//Show the tooltip with faceIn effect
$('#tooltip').fadeIn('1000');
$('#tooltip').fadeTo('100',0.9);
}).mousemove(function(e) {
//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
}).mouseout(function() {
//Put back the title attribute's value
$(this).attr('title',$('.tipBody').html());
//Remove the appended tooltip template
$(this).children('div#tooltip').remove();
});
/*=========================Tooltip END===================================*/
这就是我从数据库中获取工具提示中所有文本的方式
echo "<p class='resultInfo'><a rel='tooltip' class='tip'
title='<p class=title>Information: </p><p>
<span class=title>Knowledge</span><span>". $resultData['Knowledge'] ."<span class=title>Competence: </span><span>".
$resultData['Competence'] ."<span class=title>
Skills: </span><span>". $resultData['Skills'] ."</span>'>"
. $resultData["Level"] . "<span class='icon'></span></a></p>";
如上所述,该脚本运行良好。唯一的问题是当回声输出有时太长并导致我的 div 工具提示扩展到屏幕高度时。所以我想把光标中间的div往上推
最佳答案
经过大量搜索,我想我找到了
我修改了这段代码
.mousemove(function(e) {
//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
到
.mousemove(function(e) {
//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
$('#tooltip').css('top', e.pageY - 100 );
$('#tooltip').css('left', e.pageX + 20 );
不知道后面会不会出现一些奇怪的行为,我会测试一下。
关于jquery - 鼠标悬停改变出现的div的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10319164/