jQueryを使用してツールチップメッセージを作成する方法を簡単に説明します。

アイデア…​

  1. ツールチップのメッセージを表示する必要がある「

    ターゲット

    」を特定します.

  2. そのためのツールチップメッセージとCSSスタイルを作成します.

  3. 3つの関数、 –

    showTooltips

    、

    hideTooltips

    、

  4. 「

    ターゲット

    」にマウスを合わせながら、

    showTooltips

    を使って

ツールチップのメッセージを表示し、

changeTooltipsPosition

を使用して位置を初期化します。

  1. ”

    ターゲット

    “の周りにマウスを移動しながら、ツールチップを変更してください

    • changeTooltipsPosition ** でメッセージの位置を指定します。

  2. 「ターゲット」をマウスで離している間は、ツールチップを非表示にするにはhideTooltipsを使用します

メッセージ。

  1. jQueryを使ってそれを行う:)

1.ターゲット

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

<label id="username">Username : </label><input type="text"/size="50">
<span id="hint">hint (mouseover me)</span>

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();
   $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
     .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
});

自分で試してみてください

この例では、ヒントまたはラベルをマウスで移動すると、ツールチップ効果が表示されます。 

<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
    #hint{
        cursor:pointer;
    }
    .tooltip{
        margin:8px;
        padding:8px;
        border:1px solid blue;
        background-color:yellow;
        position: absolute;
        z-index: 2;
    }
</style>

</head>

<body>

<h1>jQuery tooltips example</h1>

<label id="username">Username : </label><input type="text"/size="50">
<span id="hint">hint (mouseover me)</span>

<script type="text/javascript">

$(document).ready(function() {

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

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

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

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

</script>

</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-tooltips-example.html[デモを試してください]


jquery


jqueryエフェクト


tooltips