当我使用jquery将鼠标悬停在图标上时,如何显示简单的文本框

Question

我在html中有一个输入字段,在字段旁边有一个帮助图标(？),当我将鼠标悬停在图标上时,我希望显示一条简单的文本消息,并且文本消息应该在悬停时消失.用jquery做任何方法吗？

图标将是一个简单的图像说一个小问号.文字将是"在框中输入你的名字"

Answer 1

动态创建DOM元素,然后使用目标元素的偏移量将其定位.您可以在mousein事件上附加元素的创建,并在目标元素的mouseout事件上附加破坏.

假设您的目标页面元素具有id myId:

将此添加到您的on ready函数,或者在声明myId元素后的脚本标记上:

$('#myId').mouseenter(function(){
    $('body').append("<div id='hoveringTooltip' style='position:fixed;'></div>");
    $('#hoveringTooltip').html("MY TOOLTIP TEXT GOES HERE");
    $('#hoveringTooltip').css({
        "top" : $(this).offset().top + MYTOPOFFSET,
        "left" : $(this).offset().left + MYLEFTOFFSET
    });
});
$('#myId').mouseleave(function(){
    $('#hoveringTooltip').remove();
});

Answer 2

您可以使用"工具提示"在文本位于图标上时使用鼠标移动文本,

这是一个很好的例子.

http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

这也是一个很好的例子,你可以用类似的方式实现鼠标!

http://api.jquery.com/mouseover/

也检查这个例子,

http://jsfiddle.net/DLQsX/