Buefyでツールチップを実装する方法

はじめに

前回、Buefyの導入理由がツールチップだったので、公式ドキュメント踏襲でまとめていきたいと思います。

ツールチップとは？

ツールチップとは、ホバーした際に表示される枠内の補足説明などのことで、様々なサイトで使用されています。

そして、下記の画像がツールチップの例であり、今回作成するものです。

マウスをかざした時

通常

実装

最終的なコード

Nuxtの環境があれば、ツールチップは動くはず。

<template>
    <div class="toolTip">
        <b-tooltip
            label="リンク"
            position="is-top"
            type="is-light"
            size="is-small"
            >
        <i class="fas fa-link"></i>
        </b-tooltip>
    </div>
</template>
<style scoped>
.toolTip {
    margin-left: 400px;
    margin-top: 100px;
}
</style>

Buefyの導入

ちなみに今回のツールチップを実装するするには「Buefy」を使用するため導入していない方は導入してから進めてください。

下記の記事に導入方法があるので参考にしてみてください。

makoo5.hatenablog.com

リンクのアイコンを表示

このリンクのアイコンはFontAwesomeというアイコンのツールキットを使用しています。

このリンクから公式サイトに飛べるので検索バーにlinkと打ち込んで「Start Using this icon」をタップすると<i>タグのコードが表示されるのでそれをコピペ

tooltip.vue

<div class="toolTip">
    <i class="fas fa-link"></i>
</div>

fontawesomeを読み込む。

nuxt.config.js

  ** Headers of the page
  */
  head: {
    link: [
      //追記（ここから）
      { rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.6.1/css/all.css'}
     // ここまで
    ]
  },

ツールチップの実装

<template>
    <div class="toolTip">
        <b-tooltip
            label="リンク"
            position="is-top"
            type="is-light"
            size="is-small"
            >
        <i class="fas fa-link"></i>
        </b-tooltip>
    </div>
</template>

今回は<i>タグのアイコンに対してツールチップをつけるため、それを囲うように<b-tooltip>をいうタグを記述していきます。

そうすることで<b-tooltip>で囲われた要素にツールチップをつけるがことができます。

• label : マウスオーバー時に表示される文字
• podition : ツールチップの表示位置
• type : ツールチップのスタイル
• size : ツールチップの表示サイズ

参考

Tooltip | Buefy

Font Awesome