jQueryを使用してホバー時にツールチップメッセージを表示するにはどうすればよいですか？

タイトルにあるように、jQueryを使用してホバー時にツールチップメッセージを表示するにはどうすればよいですか？

qTipをお勧めします。

ツールチッププラグインは、必要なものに対して重すぎる可能性があります。ツールチップに表示したいテキストで「title」属性を設定するだけです。

$("#yourElement").attr('title', 'This is the hover-over text');

以下はチャームのように機能します（div / span / table / tr / td / etcがあれば"id"="myId"）

    $("#myId").hover(function() {
        $(this).css('cursor','pointer').attr('title', 'This is a hover text.');
    }, function() {
        $(this).css('cursor','auto');
    });

補足として、.css('cursor','pointer')ホバー時にマウスポインタを変更します。

jQueryTooltipプラグインを見てください。さまざまなオプションのオプションオブジェクトを渡すことができます。

利用可能な他の代替ツールチッププラグインもありますが、そのうちのいくつかは

• Random.Next（）のjQueryAJAXツールチップ

• dhtml goodiesAJAXツールチップ

• clueTip

デモとドキュメントをご覧になり、コードでの使用方法について具体的な質問がある場合は、質問を更新してください。

ブートストラップツールチップを使用できます。初期化することを忘れないでください。

<span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation">
inside span
</span>

左側に説明文が表示されます。

jsで実行します：

$('.tooltip-r').tooltip();

推奨されるqTipおよびその他のプロジェクトはかなり古いため、qTip2を使用することをお勧めします。これは最新のものです。

見てくださいToolTipsterを

• 使いやすい
• フレキシブル
• 他のいくつかのツールチッププラグイン（39kB）と比較して、かなり軽量です
• 追加のスタイリングなしで見栄えが良くなります
• 事前定義されたテーマの良いセットがあります

jQiueryを使用せずにcssだけを使用してそれを行うことができます。

<a class="tooltips">
    Hover Me
    <span>My Tooltip Text</span>
</a>
<style>
    a.tooltips {
        position: relative;
        display: inline;
    }

        a.tooltips span {
            position: absolute;
            width: 200px;
            color: #FFFFFF;
            background: #000000;
            height: 30px;
            line-height: 30px;
            text-align: center;
            visibility: hidden;
            border-radius: 6px;
        }

            a.tooltips span:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 35%;
                margin-left: -8px;
                width: 0;
                height: 0;
                border-top: 8px solid #000000;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

    a:hover.tooltips span {
        visibility: visible;
        opacity: 0.8;
        bottom: 30px;
        left: 50%;
        margin-left: -76px;
        z-index: 999;
    }
</style>