HTMLでカスタマイズ可能なツールチップを「vue-directive-tooltip」で実装する

by kabanoki

HTML

<script src="https://unpkg.com/vue-directive-tooltip@latest/dist/vueDirectiveTooltip.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-directive-tooltip@latest/dist/vueDirectiveTooltip.css">
<div id="app">
  <p>
    <span v-tooltip="{ ref: 'tooltipRef' }">カスタムツールチップ</span>
  </p>
  <div ref="tooltipRef" class="tooltip-content">
    <p>ツールチップを自作します。</p>
    <ol>
      <li><b>ref</b>を設定したHTMLが<b>v-tooltip</b>で呼び出せます。</li>
    </ol>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

#app {
  padding: 20px;
}

a {
   color: #3eaf7c;
}

Vue

Vue.use(vueDirectiveTooltip);

new Vue({
  el: "#app"
});