Vuetify.js 2.2のMenu, Tooltipコンポーネントについて

# 概要

Menu、Tooltipコンポーネントの初歩的な使い方のまとめです。

**環境**

* Windows 10 Professional 1909
* Node.js 12.14.1
* Vue.js 2.6.11
* Vuetify.js 2.2.12

**参考**

* [Quick start - Vuetify.js] (https://vuetifyjs.com/en/getting-started/quick-start)
* [Components] (https://vuetifyjs.com/en/components/api-explorer)
* [Styles - Colors] (https://vuetifyjs.com/en/styles/colors)
* [Material Design Icons] (https://cdn.materialdesignicons.com/4.5.95/)


# [Menus] (https://vuetifyjs.com/en/components/menus)

v-menuコンポーネントはアクティベーターとメニューコンテンツの2つからなり、基本的な構成は以下のようになります。
メニューコンテンツにv-listコンポーネントが使われている例を多く見ますが、v-cardやv-sheetなどのコンポーネントでもかまいません。

```vue
<v-menu>
  <!-- メニューのアクティベーター -->
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">Open</v-btn>
  </template>
  <!-- メニューになるコンテンツ -->
  <v-list>
    <v-list-item>
      // ...省略...
    </v-list-item>
  </v-list>
</v-menu>
```

## Props

### VMenu

* [VMenu] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/components/VMenu/VMenu.ts)
* [Delayable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/delayable/index.ts)
* [Detachable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/detachable/index.ts)
* [Bootable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/bootable/index.ts)
* [Menuable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/menuable/index.ts)
* [Positionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/positionable/index.ts)
* [Activatable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/activatable/index.ts)
* [Returnable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/returnable/index.ts)
* [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/toggleable/index.ts)
* [Themeable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/themeable/index.ts)

```text
VMenu  ---- Delayable
       `--- Dependent
       `--- Detachable  ---- Bootable
       `--- Menuable    ---- Positionable
       |                `--- Stackable
       |                `--- Activatable
       `--- Returnable
       `--- Toggleable
       `--- Themeable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VMenu**      |auto           |boolean          |false     |                            |  |
|               |close-on-click |boolean          |<font color="blue"><strong>true</strong></font> |                            |true  |
|               |close-on-content-click|boolean   |<font color="blue"><strong>true</strong></font> |                            |true  |
|               |*disabled*     |boolean          |false     |                            |  |
|               |disable-keys   |boolean          |false     |                            |  |
|               |max-height     |number or string |<font color="blue"><strong>auto</strong></font> |                            |'auto' |
|               |offset-x       |boolean          |false     |                            |  |
|               |offset-y       |boolean          |false     |                            |  |
|               |*open-on-click*|boolean          |<font color="blue"><strong>true</strong></font>|                            |true  |
|               |open-on-hover  |boolean          |false     |                            |  |
|               |origin         |string           |<font color="blue"><strong>'top left'</strong></font>|                            |'top left'  |
|               |transition     |boolean or string|v-menu-transition|                     |'v-menu-transition' |
|Delayable      |open-delay     |number or string |0         |                            |0 |
|               |close-delay    |number or string |0         |                            |0 |
|Detachable     |attach         |any              |false     |v-app                       |false |
|               |content-class  |string           |undefined |v-app                       |'' |
|Bootable       |eager          |boolean          |false     |                            |  |
|Menuable       |allow-overflow |boolean          |false     |                            |  |
|               |*light*        |boolean          |false     |                            |  |
|               |*dark*         |boolean          |false     |                            |  |
|               |max-width      |number or string |auto      |                            |'auto'  |
|               |min-width      |number or string |undefined |                            |  |
|               |nudge-bottom   |number or string |0         |                            |0  |
|               |nudge-left     |number or string |0         |                            |0  |
|               |nudge-right    |number or string |0         |                            |0  |
|               |nudge-top      |number or string |0         |                            |0  |
|               |nudge-width    |number or string |0         |                            |0  |
|               |offset-overflow|boolean          |false     |                            |  |
|               |open-on-click  |boolean          |-         |                            |  |
|               |position-x     |number           |undefined |                            |null  |
|               |position-y     |number           |undefined |                            |null  |
|               |z-index        |number or string |undefined |                            |null  |
|Positionable   |absolute       |boolean          |false     |                            |  |
|               |bottom         |boolean          |false     |absolute, fixed             |  |
|               |fixed          |boolean          |false     |                            |  |
|               |left           |boolean          |false     |absolute, fixed             |  |
|               |right          |boolean          |false     |absolute, fixed             |  |
|               |top            |boolean          |false     |absolute, fixed             |  |
|Activatable    |activator      |any              |undefined |                            |null |
|               |disabled       |                 |-         |                            |  |
|               |internal-activator|boolean       |false     |                            |  |
|               |open-on-hover  |boolean          |false     |                            |  |
|Returnable     |return-value   |any              |undefined |                            |null|
|Toggleable     |value          |any              |undefined |                            |  |
|Themeable      |dark           |boolean          |false     |                            |null |
|               |light          |boolean          |false     |                            |null |

* value : コンポーネントを表示するか非表示にするかを制御します。

## 実装例

### テーマ

**dark**

ダークテーマのメニューです。ボタンをクリックするとダークテーマが適用されたv-listコンポーネントで作成したメニューが表示されます。閉じるにはメニューやメニュー外をクリック、または<kbd>ESC</kbd>を押下します。

```vue
<v-menu dark>
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">
      Dropdown
    </v-btn>
  </template>
  <v-list dark dense>
    <v-list-item v-for="menu in menus" :key="menu.no" link>
      <v-list-item-icon>
        <v-icon dark dense left color="blue">{{ menu.icon }}</v-icon>
      </v-list-item-icon>
      <v-list-item-title>{{ menu.name }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>
```

![menu-dark.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ce6ddba1-2361-4e83-fc76-cbd11828ba0b.gif)

**light**

ライトテーマのメニューです。`light`プロパティ以外のソースコードはダークテーマと同一です。（動作は同じなのでスクリーンショットになります）

![menu-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/46d3a78c-4785-7a0b-7d58-efd1f79d8ff1.png)

### メニューの開閉

**hover**

`open-on-click`プロパティのデフォルト値がtrueなので、アクティベーターをクリックするとメニューが表示されるというのがデフォルトの動きになります。
`open-on-hover`プロパティをtrueにすると、アクティベーターにマウスカーソルを合わせるだけでメニューが表示されるようになります。

```vue
<v-menu :open-on-hover="true" :open-on-click="false" offset-y>
  <!-- hover 省略 -->
</v-menu>
```

![menu-hover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3ed7c56a-6781-d082-5ec5-af149039578b.gif)

**close**

`close-on-click`プロパティをtrueにするとメニュー外をクリックすると閉じ、`close-on-content-click`プロパティをtrueにするとメニューをクリックすると閉じます。どちらもデフォルト値はtrueなのでメニュー外やメニューをクリックするとメニューは閉じます。

```vue
<v-menu :close-on-click="true" :close-on-content-click="false">
  <!-- click close 省略 -->
</v-menu>

<v-menu :close-on-click="false" :close-on-content-click="true">
  <!-- content click close 省略 -->
</v-menu>
```

![menu-close.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/176c0a26-d6c5-9fe0-aa9c-361e3dcfb1dd.gif)

**delay**

`open-delay`、`close-delay`プロパティでメニューの開閉にディレイを設定できます。指定する単位はミリ秒です。

```vue
<v-menu open-delay="2000" close-delay="2000" :open-on-hover="true">
  <!-- delay 省略 -->
</v-menu>
```

**disabled**

`disabled`プロパティを指定するとメニューを無効化します。

```vue
<v-menu disabled>
  <!-- disabled 省略 -->
</v-menu>
```

**disabled-keys**

`disabled-keys`プロパティを指定するとキーボード操作を無効にします。
キーボード操作が有効だと<kbd>ESC</kbd>を押下してメニューを閉じることができます。

```vue
<v-menu disable-keys>
  <!-- disable-keys 省略 -->
</v-menu>
```

### 表示位置

**offset**

`offset-x`、`offset-y`プロパティでメニューの表示位置を調整できます。

```vue
<v-menu offset-x>
  <!-- offset-x 省略 -->
</v-menu>

<v-menu offset-y>
  <!-- offset-y 省略 -->
</v-menu>

<v-menu offset-x offset-y>
  <!-- offset-x,y 省略 -->
</v-menu>
```

`offset-x`はメニューをアクティベーターの右隣りに表示します。（表示領域があれば）
![menu-offset-x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/f7b97e4b-52d5-e5e5-b4d2-e19b71ccf3a6.png)

`offset-y`はメニューをアクティベーターの下に表示します。（表示領域があれば）
![menu-offset-y.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/c2de16ba-002a-8447-2fc3-8f90e79d0e5b.png)

`offset-x`と`offset-y`はメニューをアクティベーターの右下に表示します。（表示領域があれば）
![menu-offset-x-y.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/df79fcce-0de1-d01f-9baa-fd8868ba8ca1.png)

**position**

さらに`offset-x`、`offset-y`と`top`、`bottom`、`left`、`right`プロパティと組み合わせると、メニューを上下左右に表示させることができます。

```vue
<v-menu top offset-y>
  <!-- TOP + OFFSET-Y 省略 -->
</v-menu>

<v-menu bottom offset-y>
  <!-- BOTTOM + OFFSET-Y 省略 -->
</v-menu>

<v-menu left offset-x>
  <!-- LEFT + OFFSET-X 省略 -->
</v-menu>

<v-menu right offset-x>
  <!-- RIGHT + OFFSET-Y 省略 -->
</v-menu>
```

![menu-position.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/b050f0f0-ce7f-7f89-e723-5172331c16c6.gif)

**nudge**

さらに`nudge-top`、`nudge-bottom`、`nudge-left`、`nudge-right`プロパティを使用すると、メニューの表示位置を調整できます。

```vue
<v-menu top offset-y nudge-top="10">
  <!-- TOP 省略 -->
</v-menu>

<v-menu bottom offset-y nudge-bottom="10">
  <!-- BOTTOM 省略 -->
</v-menu>

<v-menu left offset-x nudge-left="10">
  <!-- LEFT 省略 -->
</v-menu>

<v-menu right offset-x nudge-right="10">
  <!-- RIGHT 省略 -->
</v-menu>
```

![menu-nudge.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/765f4f21-aa67-44c8-bd5d-09378d1b7cde.gif)

**absolute**

`absolute`プロパティを指定するとアクティベーターをクリックした位置にメニューが表示されます。
下記はv-sheetコンポーネントをアクティベーターとしたときの例です。

```vue
<v-menu activator="#sheet1" absolute>
  <!-- absolute 省略 -->
</v-menu>

<v-sheet id="sheet1" width="300" height="200" color="grey"></v-sheet>
```

![menu-absolute.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/92600a26-bf48-fa10-30ff-161f10a62620.gif)

### 表示サイズ

**width**

`min-width`、`max-width`プロパティでメニューの横幅を指定することができます。デフォルトではアクティベーターと同じ幅で表示されます。
下図は指定なしの状態で表示したメニューです。
![menu-width-default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/0837f065-2106-1b10-f814-40edff73e25e.png)

下図は`max-width`プロパティで横幅を制限した状態です。

```vue
<v-menu offset-y max-width="150">
  <!-- WIDTH 省略 -->
</v-menu>
```

![menu-width.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ae20e4c4-dd3c-6c90-af21-b91097ca4337.png)

**height**

`max-height`プロパティでメニューの縦幅を指定することができます。表示幅に収まらない場合はスクロールバーが表示されます。

```vue
<v-menu offset-y max-height="180">
  <!-- HEIGHT 省略 -->
</v-menu>
```

![menu-height.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/6b9f6414-5755-97b7-cccb-f6154a00b16f.png)

### トランジション

デフォルトで`fade-transition`というエフェクトが適用されていますが、`transition`プロパティで他のエフェクトを適用することもできます。
またBoolean値でfalseを指定するとエフェクト無しで表示されます。

```vue
<v-menu>
  <!-- DEFAULT 省略 -->
</v-menu>

<v-menu transition="scale-transition">
  <!-- SCALE 省略 -->
</v-menu>

<v-menu transition="scroll-x-transition">
  <!-- SCROLL 省略 -->
</v-menu>

<v-menu transition="slide-x-transition">
  <!-- SLIDE 省略 -->
</v-menu>

<v-menu :transition="false">
  <!-- FALSE 省略 -->
</v-menu>
```

![menu-transition.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/0ef4bbd0-4715-69ee-09d6-b48fbb3f1628.gif)


## Slots

**activator**

使用すると、クリックするとコンポーネントがアクティブになります（または特定のコンポーネントにカーソルを合わせます）。 これにより、イベントの伝播が手動で停止されます。 このスロットなしで、モデルを介してコンポーネントを開く場合、イベントの伝播を手動で停止する必要があります。



# [Tooltips] (https://vuetifyjs.com/en/components/tooltips)

```vue
<v-tooltip top>
  <!-- コンテンツのアクティベーター -->
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">Button</v-btn>
  </template>
  <!-- ツールチップになるコンテンツ -->
  <span>Tooltip</span>
</v-tooltip>
```

## Props

### VTooltip

* [VTooltip] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/components/VTooltip/VTooltip.ts)
* [Colorable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/colorable/index.ts)
* [Delayable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/delayable/index.ts)
* [Detachable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/detachable/index.ts)
* [Bootable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/bootable/index.ts)
* [Menuable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/menuable/index.ts)
* [Positionable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/positionable/index.ts)
* [Activatable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/activatable/index.ts)
* [Toggleable] (https://github.com/vuetifyjs/vuetify/blob/v2.2.12/packages/vuetify/src/mixins/toggleable/index.ts)

```text
VTooltip ---- Colorable
         `--- Delayable
         `--- Dependent
         `--- Detachable  ---- Bootable
         `--- Menuable    ---- Positionable
         |                `--- Stackable
         |                `--- Activatable  ---- Delayable
         |                                  `--- Toggleable
         `--- Toggleable
```

|               |name           |type             |default   |relation                    |src       |
|:--------------|:--------------|:----------------|:---------|:---------------------------|:---------|
|**VTooltip**   |*close-delay*  |number or string |0         |                            |0  |
|               |*disabled*     |boolean          |false     |                            |  |
|               |*fixed*        |boolean          |true      |                            |true  |
|               |*open-delay*   |number or string |0         |                            |0  |
|               |*open-on-hover*|boolean          |true      |                            |true  |
|               |tag            |string           |'span'    |                            |'span'  |
|               |transition     |string           |undefined |                            |  |
|               |z-index        |any              |undefined |                            |null |
|Colorable      |color          |string           |undefined |                            |  |
|Delayable      |open-delay     |number or string |-         |                            |0  |
|               |close-delay    |number or string |-         |                            |0  |
|Detachable     |attach         |any              |false     |v-app                       |false  |
|               |content-class  |string           |undefined |v-app                       |''  |
|Bootable       |eager          |boolean          |false     |                            |  |
|Menuable       |allow-overflow |boolean          |false     |                            |  |
|               |light          |boolean          |false     |                            |  |
|               |dark           |boolean          |false     |                            |  |
|               |max-width      |number or string |auto      |                            |'auto'  |
|               |min-width      |number or string |undefined |                            |  |
|               |nudge-bottom   |number or string |0         |                            |0  |
|               |nudge-left     |number or string |0         |                            |0  |
|               |nudge-right    |number or string |0         |                            |0  |
|               |nudge-top      |number or string |0         |                            |0  |
|               |nudge-width    |number or string |0         |                            |0  |
|               |offset-overflow|boolean          |false     |                            |  |
|               |open-on-click  |boolean          |false     |                            |  |
|               |position-x     |number           |undefined |                            |null  |
|               |position-y     |number           |undefined |                            |null  |
|               |z-index        |number or string |-         |                            |null  |
|Positionable   |absolute       |boolean          |false     |                            |  |
|               |bottom         |boolean          |false     |                            |  |
|               |fixed          |boolean          |-         |                            |  |
|               |left           |boolean          |false     |                            |  |
|               |right          |boolean          |false     |                            |  |
|               |top            |boolean          |false     |                            |  |
|Activatable    |activator      |any              |false     |                            |null |
|               |disabled       |boolean          |-         |                            |  |
|               |internal-activator|boolean       |false     |                            |  |
|               |open-on-hover  |boolean          |-         |                            |  |
|Toggleable     |value          |any              |undefined |                            |  |

* value : コンポーネントを表示するか非表示にするかを制御します。

## 実装例

### ポジション

v-tooltipコンポーネントでは、ツールチップを正しく表示するためにポジションを指定する`top`、`bottom`、`left`、`right`プロパティの何れかを指定する必要があります。

```vue
<v-tooltip left>
  <!-- 省略 -->
</v-tooltip>

<v-tooltip top>
  <!-- 省略 -->
</v-tooltip>

<v-tooltip bottom>
  <!-- 省略 -->
</v-tooltip>

<v-tooltip right>
  <!-- 省略 -->
</v-tooltip>
```

![tooltip-position.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/ad1a2172-e161-8405-ae13-030f122b6005.gif)

### テーマ

**dark**

ダークテーマのツールチップです。

```vue
<v-tooltip top dark>
  <template v-slot:activator="{ on }">
    <v-btn dark v-on="on">Button</v-btn>
  </template>
  <span>Tooltip</span>
</v-tooltip>
```

![tooltip-dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/152b3397-652b-d28b-78ca-f97b3b830d35.png)

**light**

ライトテーマのツールチップです。lightプロパティ以外のソースコードはダークテーマと同一です。

```vue
<v-tooltip top light>
  <template v-slot:activator="{ on }">
    <v-btn light v-on="on">Button</v-btn>
  </template>
  <span>Tooltip</span>
</v-tooltip>
```

![tooltip-light.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/2b70114a-591f-0c02-a06a-1285c28496bf.png)

### カラー

`color`プロパティでツールチップの背景色を指定します。

```vue
<v-tooltip top color="red">
  <!-- color 省略 -->
</v-tooltip>
```

![tooltip-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/39ca50a6-f6f7-332d-da6d-4b864b65e110.png)

### ツールチップのON/OFF

**open**

`open-on-hover`プロパティのデフォルト値がtrueなので、カーソルを合わせるだけでツールチップが表示されるというのがデフォルトの動きになります。
`open-on-click`プロパティをtrueにすると、アクティベーターをクリックするまでツールチップは表示されません。

```vue
<v-tooltip top :open-on-hover="true" :open-on-click="false">
  <!-- hover 省略 -->
</v-tooltip>

<v-tooltip top :open-on-hover="false" :open-on-click="true">
  <!-- click 省略 -->
</v-tooltip>
```

![tooltip-onoff.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/c3285789-7948-524e-9d8d-ca778662fe2a.gif)

**delay**

`open-delay`、`close-delay`プロパティでツールチップのON/OFFにディレイを設定できます。指定する単位はミリ秒です。
なお、クリックしてツールチップをON/OFFする設定(`open-on-click`をtrue、`open-on-hover`をfalse)と併用はできないようです。

```vue
<v-tooltip top>
  <!-- default 省略 -->
</v-tooltip>

<v-tooltip top open-delay="2000" close-delay="2000">
  <!-- delay 省略 -->
</v-tooltip>
```

左側がデフォルト（ディレイ無し）、右側がディレイ有り(2秒)の動作です。
![tooltip-delay.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7eb1afdb-a08e-ce91-d0fc-1f84d8492576.gif)

**disabled**

`disabled`プロパティをtrueに設定するとツールチップは表示されません。

```vue
<v-tooltip top disabled>
  <!-- disabled 省略 -->
</v-tooltip>
```

### サイズ

`min-width`、`max-width`プロパティでツールチップの表示幅を指定できます。

```vue
<v-tooltip top min-width="200" max-width="400">
  <!-- width 省略 -->
</v-tooltip>

<v-tooltip top>
  <!-- default 省略 -->
</v-tooltip>
```

サイズ指定有りの場合。
![tooltip-size-width.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/3a02194c-5e73-cd48-85e3-47bb7d60fef9.png)

サイズ指定が無い場合はページ幅まで広がります。
![tooltip-size-default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/9fee7136-cd66-56b0-5e8a-906d10c04b4a.png)

### トランジション

デフォルトで`scale-transition`というエフェクトが適用されていますが、`transition`プロパティで他のエフェクトを適用することもできます。

```vue
<v-tooltip top>
  <!-- default 省略 -->
</v-tooltip>

<v-tooltip top transition="fade-transition">
  <!-- fade 省略 -->
</v-tooltip>

<v-tooltip top transition="slide-x-transition">
  <!-- slide-x 省略 -->
</v-tooltip>

<v-tooltip top transition="scroll-x-transition">
  <!-- scroll-x 省略 -->
</v-tooltip>
```

左からデフォルト(`sacle-transition`)、`fade-transition`、`slide-x-transition`、`scroll-x-transition`の動きです。
![tooltip-transition.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/32ebdfb7-5d68-c4d1-c7ca-1c357d6a156b.gif)

### nudge

`nudge-top`、`nudge-bottom`、`nudge-left`、`nudge-right`プロパティでツールチップの表示位置を調整できます。
※他に`nudge-width`というプロパティもありますが使い方の確認ができませんでした。

**topとnudge-left/rightの組み合わせ**

```vue
<v-tooltip top nudge-left="30">
  <!-- nudge-left 省略 -->
</v-tooltip>

<v-tooltip top>
  <!-- default 省略 -->
</v-tooltip>

<v-tooltip top nudge-right="30">
  <!-- nudge-right 省略 -->
</v-tooltip>
```

![tooltip-nudge-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/0d0aa7dd-6ab9-ce0a-6773-31f58533b5ec.png)

**bottomとnudge-left/rightの組み合わせ**

```vue
<v-tooltip bottom nudge-left="30">
  <!-- nudge-left 省略 -->
</v-tooltip>

<v-tooltip bottom>
  <!-- default 省略 -->
</v-tooltip>

<v-tooltip bottom nudge-right="30">
  <!-- nudge-right 省略 -->
</v-tooltip>
```

![tooltip-nudge-bottom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/7b2aed54-8ffb-291f-c9b6-e083a3430873.png)

**leftとnudge-top/bottomの組み合わせ**

```vue
<v-tooltip left nudge-top="50">
  <!-- nudge-top 省略 -->
</v-tooltip>

<v-tooltip left>
  <!-- default 省略 -->
</v-tooltip>

<v-tooltip left nudge-bottom="50">
  <!-- nudge-bottom 省略 -->
</v-tooltip>
```

![tooltip-nudge-left.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/55b72516-61d7-764c-1482-57271915c654.png)

**rightとnudge-top/bottomの組み合わせ**

```vue
<v-tooltip right nudge-top="50">
  <!-- nudge-top 省略 -->
</v-tooltip>

<v-tooltip right>
  <!-- default 省略 -->
</v-tooltip>

<v-tooltip right nudge-bottom="50">
  <!-- nudge-bottom 省略 -->
</v-tooltip>
```

![tooltip-nudge-right.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/2c82a5e7-5a3c-03d3-f269-500d3381691c.png)

**nudge同士の組み合わせ**

```vue
<v-tooltip left nudge-top="25" nudge-right="25">
  <!-- nudge-top nudge-right 省略 -->
</v-tooltip>
```

![tooltip-nudge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/bab06eb0-c4f0-1d59-2aec-8a22528b212e.png)

### アクティベーター

アクティベータスロットを使わずに`activator`プロパティを使用することもできます。

```vue
<v-tooltip left nudge-top="20" activator="#card_ok">
  <span>ok tooltip</span>
</v-tooltip>
<v-tooltip right nudge-top="20" activator="#card_cancel">
  <span>cancel tooltip</span>
</v-tooltip>
<v-card>
  <!-- 省略 -->
  <v-card-actions>
    <v-spacer></v-spacer>
    <v-btn small id="card_ok">OK</v-btn>
    <v-btn small id="card_cancel">Cancel</v-btn>
  </v-card-actions>
</v-card>
```

![tooltip-activator.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22772/cb1e4d67-331f-b61e-59c3-c1b64f2827fc.gif)

## Slots

**activator**
使用すると、クリックするとコンポーネントがアクティブになります（または特定のコンポーネントにカーソルを合わせます）。 これにより、イベントの伝播が手動で停止されます。 このスロットなしで、モデルを介してコンポーネントを開く場合、イベントの伝播を手動で停止する必要があります。