【jQuery】カーソル合わせたときに注釈を表示する

jqueryFrontEnd

マウスでカーソルを合わせたときに関連付けられた注釈を表示するjavascriptを紹介します。

jQueryのhoverイベントを利用してマウスオーバー時に表示、マウスアウト時に非表示とすることでマウスカーソルに追随して表示するように見えます。

hoverリファレンス

hover(over, out) - jQuery 日本語リファレンス
スポンサーリンク

コード

ccenpintsu_TP_V

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<table class="table table-bordered table-dark">
	<tr>
		<th scope="col"> # </th>
		<th scope="col">題名</th>
		<th scope="col">評価</th>
	</tr>
	<tr>
		<td scope="row">0</td>
		<td class="hoverAssay" data-eId="0">きみのなは</td>
		<td>☆☆☆☆☆</td>
	</tr>
	<tr>
		<td scope="row">1</td>
		<td class="hoverAssay" data-eId="1">てんきのこ</td>
		<td>☆☆☆☆</td>
	</tr>
	<tr>
		<td scope="row">2</td>
		<td class="hoverAssay" data-eId="2">秒速5センチメートル</td>
		<td>☆☆☆</td>
	</tr>
</table>

まずは簡単に表を作ります。見栄えとしてbootstrapをCDNで読み込んで適用させています。記事後方にデモを用意してあるのでよかったら見てみて下さい。

jQueryをCDNで読み込んでおきます。特に問題が無ければダウンロードしても可です。

要素にデータ属性で値を持たせておいて、javascriptで持たせた値を参照するイメージです。

データ属性は特に難しく考えることはなく、便利なので覚えておいて損はないです。

データ属性ドキュメント

データ属性の使用 - ウェブ開発を学ぶ | MDN
HTML5 は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性、 DOM の追加プロパティ、 Node.setUserData() のような特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を...

CSS

#pop{
    display:inline-block;
    position:absolute;
    margin-top:15px;
    margin-left:5px;
    background:rgba(0,0,0,0.5);
    color:#FFF;
    margin-top:15px;
    text-align:center;
    border-radius:3px;
    padding:5px;
}

マウスオーバー時の注釈のCSSを記述しています。お好みでアレンジしてみてください。

JavaScript


var arr = {
    0: {'assay': "とてもよい"},
    1: {'assay': "よい"},
    2: {'assay': "ほろにがい"},
};
$(function(){
    $('.hoverAssay').hover(function(){
        var eID = $(this).attr('data-eId');
        if (arr[eID]['assay'] !== undefined) {
            var text = arr[eID]['assay'];
        }else{
            var text = '評価はまだありません';
        }
        $('body').append('
'+text+'
'); $('#pop').show(); $(window).mousemove( function(e){ var x = e.pageX; var y = e.pageY; $('#pop').css({left:x+'px',top:y+'px','z-index':'100'}); }); }, function (){ $('#pop').remove(); } ); });

jsonを読み込んで運用する想定で記述してみました。

Demo

See the Pen zYrOmKB by sin-o-pg (@sin-o-pg) on CodePen.

イメージがしやすいようにデモを貼ります。参考になれば幸いです。

※例として使用している題名、評価、注釈はフィクションです。

コメント

タイトルとURLをコピーしました