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

我在html中有一个输入字段，字段旁边有一个帮助图标（？），当我将鼠标悬停在图标上时，我想要一个简单的文本消息将被显示，并且在悬停时文本消息应该消失。任何方式使用jQuery来做到这一点？如何显示一个简单的文本框，当我将鼠标悬停在使用jquery的图标上

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

来源

2012-08-02 Haran Murthy

使用'在IMG或http://onehackoranother.com/projects/jquery/tipsy/ title'属性，使其fanicer – Detect 2012-08-02 16:19:26

您可以使用“工具提示”旅游与鼠标的文本，同时它的图标，

这里是一个很好的例子。

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

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

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

检查这个例子也

http://jsfiddle.net/DLQsX/

来源

2012-08-02 16:26:45 MJQ

的绳索对于工具提示，我看到浏览器工具提示以及令人讨厌的问题，当我将鼠标悬停在 – 2012-08-02 16:50:21

上时，该如何删除该示例。在$（this）.data（'tipText'，title）.removeAttr（'title'）;它删除标题，以防止窗口显示自己的工具提示或说元素的标题。再检查一遍！ – MJQ 2012-08-02 16:58:06

它正在做的是创建一个自定义标题，您想要在鼠标悬停和删除标题上显示，以便该窗口不应显示该元素的标题，并会显示您的消息。然后在鼠标悬停结束后，它恢复标题。 – MJQ 2012-08-02 17:01:15

即时创建DOM元素，然后使用目标元素的偏移量将其固定。您可以附加mousein事件上元素的创建，以及目标元素的mouseout事件上的销毁。

假设你的目标页面元素有一个ID身份识别码：

添加到您的待机功能，或在身份识别码元素已被宣布后的脚本标记：

$('#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-02 16:18:06 Mindwin

这是一个很好的代码！ – MJQ 2012-08-02 16:36:17

谢谢。试图学习SO – Mindwin 2012-08-02 16:39:11

见jQuery的hover event 。

$("#help_icon").hover(function(){ 
    $("#msg_div").hide(); 
    $("#msg_div").show(); 
});

来源

2012-08-02 16:19:45 jjclarkson

$("#help_icon").hover(
    function() { 
    $("#msg_div").show(); 
    }, 
    function() { 
    $("#msg_div").hide(); 
    } 
);

从在同一链路jjclarkson的答案

来源

2012-08-02 16:25:44 joevallender

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

回答

相关问题