[Vue.js]v-tooltipの使い方を試す

今日は、Vue.jsのv-tooltipという要素にオンマウスで説明(Tooltip)とかを表示できるライブラリを試してみる。

１．v-tooltipって何だ？

Vue.jsのライブラリなので、先にVue.jsが読み込まれている必要があります。ディレクティブとして実装されます。

ディレクティブ？？？

ディレクティブとは、 DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。

HTML要素の属性みたいに記述するとイイ感じに動いてくれるv-modelとかv-onみたいなやつのことだ。

本家はこちら。　Akryum/v-tooltip - GitHub

２．さっそく使ってみる。

CDNがあるのですぐ試せる。

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/v-tooltip"></script>

使うには、Javascript側でこの一行を使って読み込みする必要がある。

Vue.use(VTooltip)

純粋にオンマウスで説明を表示させるtooltipの場合はこんな感じ。

<button v-tooltip.right="'右側にメッセージが表示されます'">TOP</button>

一応、.rightとか.topとかオプション使って表示位置の調整ができる。

他にも、ディレクティブに渡す情報を連想配列化して細かいオプションも渡せる様だ。

３．CSSがついてない。

デフォだとスタイルがついてない。

こんな感じの設定入れたらいいよーっていうサンプルがGitHub上の解説の一番下に付いている。

今度、わんすけサイトのスタイルに合わせてカスタムしたCSSを考えよう。。。

４．オンマウスだけじゃないみたいだが。。。

一応、オンマウスでコメント表示するv-tooltipを読み込ませると、他にもv-popoverというコンポーネントとv-close-popoverというディレクティブが一緒に読み込まれるようだ。

サンプルコードの通り実装すると、クリック時に吹き出しがでるようになるんだが・・・

イマイチその吹き出しにどうやってコンテンツを表示させるのかがわからんなぁ?

<v-popover>
  <button>Click me</button>

  <template slot="popover">
    <a v-close-popover>Close</a>
  </template>
</v-popover>

v-tooltipは、新しいコンテンツページに組み込む予定なので、詳しく使い方わかったらこの記事は再度更新することにして、今日は寝よう?