带有文本的鼠标指针“;工具提示”;

Mouse pointer with text "tooltip"

本文关键字：工具提示 鼠标指针 文本      更新时间：2023-09-26

我使用HTML/jquery/CSS，并有一段文本-"test"。

我如何让"测试"文本跟随鼠标指针（或者如果更容易的话，用文本替换鼠标指针图标）？

编辑来自Tims的答案：

CSS:   #follower { background: #fff; padding: 5px; border: 1px solid #ddd; position: absolute; }

JS: $(document).ready(function(){
    $("#follower").hide();
    $(document).mousemove(function(e){
        $("#follower").show();
        $("#follower").css({
            top: (e.pageY + 15) + "px",
            left: (e.pageX + 15) + "px"
        });
    });
});

您可以使用mousemove事件来捕捉鼠标的位置，然后设置为文本span。

Html:

<html>
<body onmousemove="mousemove()">
<span id="textSpan" style="position:absolute">test</span>
</body>
</html>

js:

function mousemove()
{
$('#textSpan').css({
    'top' : event.pageY,
    'left' : event.pageX
}); 
}

在JsFiddle 中看到它的作用

<div id="demo-mouse" class="box">
    <h3>Hover over this box to see mouse tracking in action</h3>
</div>
$(document).ready(function()
{
    $('#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'
    });
});
相关文章：