今日は、Vue.jsのv-tooltipという要素にオンマウスで説明(Tooltip)とかを表示できるライブラリを試してみる。1.v-tooltipって何だ?Vue.jsのライブラリなので、先にVue.jsが読み込まれている必要があります。ディレクティブとして実装されます。要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。HTML要素の属性みたいに記述するとイイ感じに動いてくれるv-modelとかv-onみたいなやつのことだ。GitHub2.さっそく使ってみる。CDNがあるのですぐ試せる。src="https://unpkg.com/v-tooltip"></script>使うには、Javascript側でこの一行を使って読み込みする必要がある。Vue.use(VTooltip)1Vue.use(VTooltip)純粋にオンマウスで説明を表示させるtooltipの場合はこんな感じ。v-tooltip.right="'右側にメッセージが表示されます'">TOP</button>TOP一応、.rightとか.topとかオプション使って表示位置の調整ができる。他にも、ディレクティブに渡す情報を連想配列化して細かいオプションも渡せる様だ。3.CSSがついてない。デフォだとスタイルがついてない。こんな感じの設定入れたらいいよーっていうサンプルがGitHub上の解説の一番下に付いている。今度、わんすけサイトのスタイルに合わせてカスタムしたCSSを考えよう。4.オンマウスだけじゃないみたいだが。一応、オンマウスでコメント表示するv-tooltipを読み込ませると、他にもv-popoverというコンポーネントとv-close-popoverというディレクティブが一緒に読み込まれるようだ。meここに何かが表示される。コメントをキャンセルメールアドレスが公開されることはありません。管理者へ連絡Twitter@yizm2もっさんに聞いてみる。