マウスでカーソルを合わせたときに関連付けられた注釈を表示するjavascriptを紹介します。
jQueryのhoverイベントを利用してマウスオーバー時に表示、マウスアウト時に非表示とすることでマウスカーソルに追随して表示するように見えます。
hoverリファレンス
hover(over, out) - jQuery 日本語リファレンス
semooh.jp
コード
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">秒速５センチメートル</td>
<td>☆☆☆</td>
</tr>
</table>まずは簡単に表を作ります。見栄えとしてbootstrapをCDNで読み込んで適用させています。記事後方にデモを用意してあるのでよかったら見てみて下さい。
jQueryをCDNで読み込んでおきます。特に問題が無ければダウンロードしても可です。
要素にデータ属性で値を持たせておいて、javascriptで持たせた値を参照するイメージです。
データ属性は特に難しく考えることはなく、便利なので覚えておいて損はないです。
データ属性ドキュメント
データ属性の使用 - ウェブ開発を学ぶ | MDN
HTML5 は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性やDOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。
developer.mozilla.org
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.
イメージがしやすいようにデモを貼ります。参考になれば幸いです。
※例として使用している題名、評価、注釈はフィクションです。
コメント