前提
- フロントエンド（HTML/CSS, JavaScript）の知識がある
- 何かしらのJSフレームワーク（jQueryなど）を使ったことがある
特徴
- 一部を除いてほぼ HTML/CSS そのままで書くことができる
- VirtualDOM を利用するので、比較的軽量
- ツールチップの見た目のカスタマイズもしやすい
手順
1. Vue.jsの読み込み
index.html
<script src='https://unpkg.com/vue' type='text/javascript'></script>
※手軽に利用するためにCDNで読み込む
2. ツールチップの準備
HTMLでは普通にdivタグで記述すればOK。
Vueが識別するためのid（この場合はtool-tip）さえ付ければ残りの部分はどのようにしても問題なし。
index.html
<div id='tool-tip'>
<!-- ツールチップの内容 -->
</div>
3. ツールチップを Vue で扱えるようにする処理を記述
3-1. JSに Vue コンポーネントを定義し、HTML側のdivと紐付ける
index.js
let toolTip = new Vue({
el: '#tool-tip', // HTML側のidと対応
data: {
tipStyle: { // 後述のスタイル用オブジェクト
position: 'absolute',
top: '0px',
left: '0px',
},
}
});
3-2. HTMLのdivに対して Vue 独自のタグでVueコンポーネント内のスタイル用オブジェクトを指定する。
index.html
<div id='tool-tip' v-bind:style='tipStyle'>
<!-- ツールチップの内容 -->
</div>
4. マウスについてくる処理を記述
index.js
// 関数（処理本体）
let toolTipRendering = () => {
return (e) => {
toolTip.tipStyle.left = parseInt(e.clientX + 30 /*ここの数値は任意で、変えることによってカーソルからの距離が変わる*/) + 'px';
toolTip.tipStyle.top = parseInt(e.clientY + 30 /*同上*/) + 'px';
}
}
// 処理呼び出し（いい言い方が見つからなかった…）
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('mousemove', toolTipRendering(), false);
}, false);
完成
以下でソースと実行テストが見れる
ちなみに
Vue コンポーネントで作っているため、コンポーネント内に表示データ用オブジェクトを用意して、ツールチップ内の情報とバインドしたりも簡単に出来るのでオススメ。
index.html
<div id='tool-tip' v-style='tipStyle'>
id : {{tipData.id}} <!-- => これだけで "0000" が画面に表示される -->
title : {{tipData.title}} <!-- => "hogehogefuga" が画面に表示される -->
</div>
index.js
let toolTip = new Vue({
el: '#tool-tip', // HTML側のidと対応
data: {
tipStyle: { // 後述のスタイル用オブジェクト
position: 'absolute',
top: '0px',
left: '0px',
},
tipData: {
id: '0000',
title: 'hogehogefuga',
},
}
});
他にも、チェックボックスによって表示・非表示を切り替えたり、どの部分も拡張性が高いのがおすすめポイント