5

我在 html 中有一个输入字段，该字段旁边有一个帮助图标 (?)，当我将鼠标悬停在该图标上时，我希望显示一条简单的文本消息，并且文本消息应该在悬停时消失。有什么方法可以使用 jquery 做到这一点？

图标将是一个简单的图像说一个小问号。文本将是“在框中输入您的姓名”

4

4 回答 4

9

动态创建一个 DOM 元素，然后使用目标元素的偏移量将其固定。您可以将元素的创建附加到 mousein 事件上，并将销毁附加到目标元素的 mouseout 事件上。

假设您的目标页面元素有一个 id myId：

将此添加到您的准备就绪函数中，或在声明 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();
});
于 2012-08-02T16:18:06.093 回答
7

您可以使用“工具提示”在图标上用鼠标移动文本，

这是一个很好的例子。

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

这也是一个很好的例子，你可以用类似的方式实现鼠标移出！

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

也检查这个例子，

http://jsfiddle.net/DLQsX/

于 2012-08-02T16:26:45.927 回答
3

请参阅 jQuery悬停事件。

$("#help_icon").hover(function(){
    $("#msg_div").hide();
    $("#msg_div").show();
});
于 2012-08-02T16:19:45.410 回答
1 
$("#help_icon").hover(
  function () {
    $("#msg_div").show();
  }, 
  function () {
    $("#msg_div").hide();
  }
);

来自与 jjclarkson 的答案相同的链接

于 2012-08-02T16:25:44.807 回答