如何顯示一個簡單的文本框，當我將鼠標懸停在使用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的圖標上

回答

相關問題