Vue2のv-tooltipからVue3のfloating-vueへの移行

はじめに

こんにちは、ラボルのフロントエンドエンジニアのchi-satoです。
ラボルでは、フロントエンドのフレームワークでVue.jsを使用しているのですが、2023年12月末でVue2のサポートが終了するため、Vue3へのリプレイスを進めてきました。

その中で、Vue2で使っていたツールチップの実装がVue3では使えなくなってしまったので、Vue3でも対応できるようにライブラリをアップデートしました。そのため今回は、アップデート後のツールチップのライブラリ「floating-vue」についてと、より楽に実装するための方法をご紹介します！

floating-vueを使うことになった経緯

Vue2の既存コードでは「v-tooltip」というプラグインを使用してツールチップを実装していましたが、使用していたv-tooltipのバージョンがVue3には対応していませんでした。そのためVue3でも対応させるために新しいバージョンを使うことになりました。バージョンアップに伴って、名前も「floating-vue」に変更になりました。

v-tooltipではpopperjs(https://popper.js.org/)というライブラリを使用してVue.jsでのツールチップを実現していましたが、floating-vueではfloating-ui(https://floating-ui.com/)というライブラリを使っています。バージョンアップにより使い方が変わった箇所がいくつかあるので、次のセクションでは、実際にfloating-vueの使い方を紹介します。

基本の使い方

Vue3で新規実装したコード(floating-vue)

Vue2のときの記述方法はこちらでしたが、Vue3では下記のように実装します。

▼実装後のイメージ
これから実装するツールチップのイメージです。
tooltip_img

▼install

npm i floating-vue

▼app.jsでfloating-vueを読み込む

import { Tooltip } from "floating-vue";
import "floating-vue/dist/style.css";//デフォルトcss

nuxtApp.vueApp.component("VTooltip", Tooltip);

▼Page側で読み込む
Sample.vue

<template>
  <VTooltip
    :triggers="['click']"
    auto-hide
    distance="8"
    class="v-tooltip"
    placement="top">
    <button
      type="button"
      class="tooltip__btn"
      @click="clickEvent">
      ？
    </button>
    <template #popper>
      ここにツールチップの内容が入ります
    </template>
  </VTooltip>
</template>

<script setup>
const clickEvent = () => {
    console.log('tooltipがclickされました')
};
</script>

<style lang="scss">
.tooltip__btn {
  @include font-size(12);
  width: 20px;
  height: 20px;
  font-weight: bold;
  color: #fff;
  background-color: #c8c8c8;
  border-radius: 50%;
}
</style>

▼補足
VTooltipに指定している属性の内容は下記の通りです。

triggers : ツールチップを表示/非表示するトリガーとなるイベントを設定します。
distance : 垂直方向の距離をピクセルで指定します。(水平方向の距離を指定したい場合はskiddingを使います)
placement : tooltipを表示する位置を指定します。
auto-hide : tooltipの領域外をクリックしたときにツールチップが閉じるようになります。

あとは任意でCSSやイベントを指定したら、ツールチップの実装の完了です！

Vue2で使っていたv-tooltipのコード

ちなみに、Vue2で使っていたv-tooltipは下記のようにして実装していました。

▼app.jsで読み込む

import VTooltip from 'v-tooltip'

Vue.use(VTooltip);

▼Page側で読み込む

Sapmle.vue

<template>
  <v-popover offset="16">
　　　　  <button 
      type="button" 
      class="tooltip__btn" 
      @click="clickEvent">
      ？
    </button>
　　　　  <template slot="popover">
        ここにツールチップの内容が入ります
    </template>
  </v-popover>
<template>

<style lang="scss">
.tooltip__btn {
  @include font-size(12);
  background-color: $disable;
  font-weight: bold;
  color: $white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
</style>

▼補足

offset : ツールチップが表示される位置をピクセルで指定します。offset="10 4”のように指定すると、垂直方向に10px,水平方向に4px移動します。

Tooltipをコンポーネント化してより楽に使い回す

前のセクションではfloating-vueを使ってツールチップを実装しましたが、Tooltipの呼び出し側で属性の指定をするとコード量が増えてしまうし、仕様が変更になった時に修正するのは手間ですよね。そのため、floating-vueで実装したツールチップのコードを更にコンポーネント化し、より楽に使いまわせるようにします。

▼コンポーネントのコード
CustomTooltip.vue

<template>
  <VTooltip
    :triggers="['click']"
    auto-hide
    distance="8"
    class="v-tooltip"
    :placement="tooltipPlacement">
    <button
      type="button"
      class="tooltip__btn"
      @click="$emit('click')">
      ？
    </button>
    <template #popper>
        <slot name="content" />
    </template>
  </VTooltip>
</template>

<script setup lang="ts">
const props = defineProps({
  isShowBottom: { type: Boolean, default: false }, //吹き出し位置のカスタム用
});
const tooltipPlacement = computed(() => {
  return props.isShowBottom ? "bottom" : "top";
});
</script>

<style lang="scss">
.tooltip__btn {
  @include font-size(12);
  width: 20px;
  height: 20px;
  margin-left: 4px;
  font-weight: bold;
  color: $white;
  background-color: $disable;
  border-radius: 50%;
}
</style>

▼Tooltipの呼び出し側
Tooltipを呼び出す側では、#contentを指定しているタグの中でツールチップに表示する内容を差し込みます。イベントやpropsは必要に応じて指定します。

Sample.vue

<CustomTooltip
　　　　is-show-bottom="true"
　　　　@click="clickEvent()">
  <template #content>
  　　　　ここにツールチップの内容を記載します
  </template>
</CustomTooltip>

導入手順は以上です！これでより楽にツールチップを使いまわせるようになりました。

まとめ

今回は「 floating-vue」についての紹介と、より楽に使い回す方法をご紹介しました！Vue3で簡単にツールチップを実装したい方は、是非試してみてください。

最後に

ラボルでは、エンジニアを積極採用中です。

1、2 年目のエンジニアから経験豊富なテックリードやエンジニリングマネージャーまで、興味がある方はぜひご応募ください!!

labol.co.jp

らぼるてっく。

てっくてっく歩いてっく。