[javascript]vuetifyのtooltipについて

javascript

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

ツールチップ(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ツールチップの最小幅指定

サンプルコード

コメント

タイトルとURLをコピーしました