jQueryを使ってツールチップを作成する方法

jQueryでツールチップを作成する方法

jQueryを使用してツールチップメッセージを作成する簡単なアイデアを次に示します。

アイデア…

ツールチップメッセージを表示する必要がある「target」を特定します。
ツールチップメッセージとそのCSSスタイルを作成します。
3つの関数–showTooltips、hideTooltips、changeTooltipsPosition。
「target」をマウス入力しているときに、showTooltipsを使用してツールチップメッセージを表示し、changeTooltipsPositionで位置を初期化します。
「target」の周りをマウスで移動しながら、changeTooltipsPositionでツールチップメッセージの位置を変更し続けます。
マウスを「ターゲット」のままにして、ツールヒントメッセージを非表示にするには、hideTooltipsを使用します。
それを行うにはjQueryを使用してください:)

1. ターゲット

「ヒント」と「ユーザー名ラベル」は、ツールチップメッセージを表示するターゲットです。

Username : 
hint (mouseover me)

2. ツールチップCSS

ツールチップメッセージのCSSスタイルを作成します。

.tooltip{
    margin:8px;
    padding:8px;
    border:1px solid blue;
    background-color:yellow;
    position: absolute;
    z-index: 2;
}

3. ツールチップを表示

ツールチップメッセージを「body」タグに追加し、ツールチップメッセージの位置を初期化します。

var showTooltip = function(event) {
   $('div.tooltip').remove();
   $('I\' am tooltips! tooltips! tooltips! :)')
     .appendTo('body');
   changeTooltipPosition(event);
};

5. ツールチップを変更する

ツールチップのメッセージの位置を変更します。

var changeTooltipPosition = function(event) {
    var tooltipX = event.pageX - 8;
    var tooltipY = event.pageY + 8;
    $('div.tooltip').css({top: tooltipY, left: tooltipX});
};

6. ツールチップを非表示

ツールチップメッセージを非表示にします。

var hideTooltip = function() {
    $('div.tooltip').remove();
};

7. バインドする

マウスイベントをターゲットにバインドします。

$("span#hint,label#username'").bind({
    mousemove : changeTooltipPosition,
    mouseenter : showTooltip,
    mouseleave: hideTooltip
});

自分で試してください

この例では、ヒントまたはラベルの上にマウスを置いて、ツールチップ効果を表示します。












jQuery tooltips example

Username : 
hint (mouseover me)

デモを試す

TOC