💬

v-tooltipで、親要素をoverflow: autoさせると位置がおかしくなった

2022/11/17に公開約2,900字

概要

v-tooltipは、手軽にツールチップを表示できるパッケージです。
https://www.npmjs.com/package/v-tooltip

ツールチップの指定位置を上下左右で指定できますが、親要素にoverflow: autoが指定されていることで、指定した通りの位置に表示されない問題が起きました。

結論から言えば、下記に対策がありました。
https://github.com/RobinCK/vue-popper/issues/42#issuecomment-402706691

なかなか見つからなかったので、サンプルとあわせて書いておくことにしました。

サンプル

Nuxt.jsでサクッと作ります。
ここでは、適当なディレクトリを作ってその中に展開しています。

/v-tooltip-test
npx create-nuxt-app .
Need to install the following packages:
  create-nuxt-app
Ok to proceed? (y) y

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in .
? Project name: v-tooltip-test
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? What is your GitHub username? kawazu1008
? Version control system: None

v-tooltipを追加します。

/v-tooltip-test
npm i v-tooltip

プラグインを作成します。

/v-tooltip-test/plugins/v-tooltip.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

プラグインを登録します。

/v-tooltip-test/nuxt.config.js
export default {
  ...

  plugins: [
    // これを追記
    {
      src: '~plugins/v-tooltip.js',
      ssr: false,
    },
  ],

  ...
}

テストページを作成します。

/v-tooltip-test/pages/test.vue
<template>
  <div class="wrapper">
    <button
      type="button"
      v-tooltip="{
        content: 'メッセージ',
        placement: 'right',
      }"
    >
      トリガー
    </button>
  </div>
</template>

<style>
/* オーバーフローの指定がある入れ物を用意 */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  margin: 50px;
  border: 1px solid #9bd8f9;
  overflow: auto
}

/* v-tooltipのスタイルは本題ではないので省略します */
</style>

実行して確認します。

/v-tooltip-test
npm run dev

overflow: autoの指定がない場合は、
以下のように表示されますが、

overflow: autoの指定がある場合は、
以下のように表示されてしまい、目もあてられません。

今回の場合、ツールチップの表示方向を「右」に指定していますが、「右のままだとはみ出るし左にしとくね」という優しさ(かは分からないけど)が裏目に出ています。多くの場合、この優しさは助かりますが、どうしても指定した方向に出したいこともあります。

その場合は、Popper.jsのオプションを利用することで、はみ出しを許容することができます。
(v-tooltipはPopper.jsを使って実装されているため、オプションが利用できる)

/v-tooltip-test/pages/test.vue(抜粋)
<button
  type="button"
  v-tooltip="{
    content: message,
    placement: 'right',
    // 以下を追記
    popperOptions: {
      modifiers: {
        preventOverflow: {
          escapeWithReference: true
        }
      }
    },
  }"
>

Discussion

ログインするとコメントできます