web-dev-qa-db-ja.com

jqueryを使用してアイコンにカーソルを合わせると単純なテキストボックスを表示する方法

HTMLに入力フィールドがあり、フィールドの横にヘルプアイコン（？）があります。アイコンにカーソルを合わせると、単純なテキストメッセージが表示され、カーソルを合わせるとテキストメッセージが消えます。 jqueryを使用してこれを行う方法はありますか？

アイコンは小さな疑問符のようなシンプルな画像になります。テキストは「ボックスに名前を入力してください」になります

jqueryhtmljsponmouseoverjquery-hover
5
Haran Murthy

「ツールチップ」を使用して、アイコン上にあるときにマウスでテキストを移動できます。

これが良い例です。

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

これも良い例です。同様の方法でマウスアウトを実装できます！

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

この例も確認してください。

http://jsfiddle.net/DLQsX/

7
MJQ

その場でDOM要素を作成し、ターゲット要素のオフセットを使用して固定して配置します。要素の作成をマウスインイベントに、破棄をターゲット要素のマウスアウトイベントにアタッチできます。

ターゲットページ要素にmyIdというIDがあると仮定します。

これを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();
});
9
Mindwin

JQuery hover event を参照してください。

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

jjclarksonの答えと同じリンクから

1
joevallender