5

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

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

4

4 に答える 4

9

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

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

これをonready関数に追加するか、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 に答える