[javascript]vuetifyのtooltipについて

vuetifyでツールチップを使いました。
基本的な使い方と属性などをまとめています。

公式リンク：

Tooltip component — Vuetify

The tooltip component displays textual information regarding the element it is attached to.

ツールチップ(v-tooltip)を使う
ツールチップで変数のHTML展開
v-tooltipで使える属性
サンプルコード

ツールチップ(v-tooltip)を使う

v-tooltipで囲んで、templateの中にツールチップを反応させたい要素を書きます。
iconやspanなど、どんなタグでも問題ないようです。

カーソルを当てた時に表示するツールチップの内容を、v-tooltipタグの直下に書きます。
v-imageやh1タグなども使えるようです。

・ここが
<v-tooltip top>
  <template v-slot:activator="{ on }"> 
    <span v-on="on" class="light-blue--text">上ポップアップ</span>
  </template>
  <span>ツールチップ上表示</span>
</v-tooltip>
する！

上記では上ポップアップという文字にカーソルがあった時に、
「ツールチップ上表示」というツールチップを出しています。

ツールチップで変数のHTML展開

変数のタグを展開するときはv-htmlを使います。

変数の値を展開するテスト
<v-tooltip top>
  <template v-slot:activator="{ on }"> 
    <span v-on="on" class="green--text">テスト</span>
  </template>
  <span v-html="this.tooltipText"></span>
</v-tooltip>
テストテストテストテストテストテスト...........

v-tooltipで使える属性

公式リンクから使いそうなものだけを抜粋します。
詳しくは公式へ

属性	内容
top	ツールチップを上に表示
bottom	ツールチップを下に表示
left	ツールチップを左に表示
right	ツールチップを右に表示
z-index	ツールチップの重なり順序を指定
max-width	ツールチップの最大幅指定（指定幅からテキストが折り返される）
min-width	ツールチップの最小幅指定