前提

フロントエンド（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',
        },
    }
});

他にも、チェックボックスによって表示・非表示を切り替えたり、どの部分も拡張性が高いのがおすすめポイント

参考リンク