Tooltip

v-tooltip コンポーネントはユーザーが要素をホバーした際に情報を表示するのに便利です。v-model を経由してTooltipの表示をプログラム的に制御することができます。

Usage

Tooltips can wrap any element.

API

props
slots
v-tooltip
Name
absolute
Default
false
Type
boolean

Components.Tooltips.

Name
activator
Default
undefined
Type
any

Components.Tooltips.

Name
allow-overflow
Default
false
Type
boolean

Components.Tooltips.

Name
attach
Default
false
Type
any

Components.Tooltips.

Name
bottom
Default
false
Type
boolean

Components.Tooltips.

Name
close-delay
Default
200
Type
number | string

open-on-hover prop が true の場合に、メニューが閉じられるまでの遅延時間。(ミリ秒単位)

Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name
content-class
Default
undefined
Type
any

Components.Tooltips.

Name
dark
Default
false
Type
boolean

Components.Tooltips.

Name
debounce
Default
0
Type
number | string

Tooltipがホバーされた際に表示されてから消えるまでの時間。

Name
disabled
Default
false
Type
boolean

Components.Tooltips.

Name
fixed
Default
true
Type
boolean

Components.Tooltips.

Name
input-activator
Default
false
Type
boolean

Components.Tooltips.

Name
lazy
Default
false
Type
boolean

Components.Tooltips.

Name
left
Default
false
Type
boolean

Components.Tooltips.

Name
light
Default
false
Type
boolean

Components.Tooltips.

Name
max-width
Default
auto
Type
number | string

Components.Tooltips.

Name
min-width
Default
undefined
Type
number | string

Components.Tooltips.

Name
nudge-bottom
Default
0
Type
number | string

Components.Tooltips.

Name
nudge-left
Default
0
Type
number | string

Components.Tooltips.

Name
nudge-right
Default
0
Type
number | string

Components.Tooltips.

Name
nudge-top
Default
0
Type
number | string

Components.Tooltips.

Name
nudge-width
Default
0
Type
number | string

Components.Tooltips.

Name
offset-overflow
Default
false
Type
boolean

Components.Tooltips.

Name
open-delay
Default
200
Type
number | string

open-on-hover prop が true の場合に、メニューが開くまでの遅延時間。(ミリ秒単位)

Name
position-x
Default
undefined
Type
number

Components.Tooltips.

Name
position-y
Default
undefined
Type
number

Components.Tooltips.

Name
right
Default
false
Type
boolean

Components.Tooltips.

Name
tag
Default
'span'
Type
string

Components.Tooltips.

Name
top
Default
false
Type
boolean

Components.Tooltips.

Name
transition
Default
undefined
Type
string

Components.Tooltips.

Name
value
Default
undefined
Type
any

Components.Tooltips.

Name
z-index
Default
undefined
Type
any

Components.Tooltips.

Examples

配置

Tooltipは対象になる要素の四方向のどこにでも配置することができます。

表示

v-modelを使用してTooltipの表示をプログラム的制御できます。

Edit this page | language on Github
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore