HTML部分の記述

該当部分だけシンプルに書くとこの↓ようになります。

<label>
<img>
<input type="radio">
<p class="popup">ポップアップ表示するテキスト</p>
</label>

LABELタグの中に、表示する部分(今回はIMG)、INPUTタグ、その直下にポップアップ表示させる内容を含んだPタグ。

参考元はINPUTタグのTYPE属性が「checkbox」になっていましたが、僕が作りたいものはポップアップ表示して欲しい箇所が多数あり、チェックボックスだと次々にチェックしていくと、この↓ようにどんどん重なって表示されていきます。

これを割けるためにINPUTをラジオボタンとして使いました。

ラジオボタンは別のものがチェックされると、前にチェックされていたものが解除されるので、意図した挙動になります。

あと、Pタグのクラス「popup」ですが、参考サイトではIDになっていました。 今回作ろうとしているのはポップアップ表示させる部分が多数あるためID(値が一意)を使うのはあまり良くないです(試したら普通に動きましたが)。

なのでidではなくクラスに変更しています。 クラスに変更しても問題なく動きました。

CSS部分の記述

肝となる部分のCSSはこの↓ようになります。

.popup{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
}

input[type="radio"]{
  display: none;
}

input[type="radio"]:checked + .popup{
  display: block;
}

動作に関係のないスタイリング部分はばっさり削除しています。 各自で好きなスタイリングをしてください。

ポップアップで表示される「.popup」を初期値で非表示にし、サイズや表示位置を定義しています。

ラジオボタンも今回は表示したくないので非表示に。

最後の部分が重要で、ラジオボタンがチェックされた時に直下の「.popup」をブロック表示するというものです。

実際に動かしてみた

上記コードで動かしてみたところ、この↓ようになりました。

ラジオボタンを使うことで割と思った通りの挙動をしてくれたんですが、一番大きな問題が、

クリックした位置と無関係に画面中央(CSSで定義した位置)に表示されてしまいます。

なのでクリック位置が画面中央と離れていると、

表示位置を変えたとしても、固定されている以上この問題は必ず発生してしまいます。

他にもイマイチな点として、パソコンでもクリックしないとポップアップ表示してくれません。 めんどくせーのでパソコンではホバーで表示して欲しい。

というわけで、この手法は今回の目的にはあまり合いませんでした。

Microtipの導入方法

CDNからCSSを読み込むなり、コピペで自分のCSSに追加するなりするだけです。

Microtipのコードの書き方

最小限だとこの↓ような感じになります。

<button role="tooltip" aria-label="ポップアップ表示するテキスト">
表示される部分
</button>

コードも非常にシンプルで理解しやすいのがとてもいいですね。

実際に動かしてみた

上記コードで動かしてみたところ、この↓ようになりました。

先ほどの問題点は両方解決されていて、ちゃんとクリックした位置に対して近い位置にポップアップ(ツールチップ)表示してくれます。 パソコンではクリック不要でホバーで表示。

最初のTITLE属性のツールチップ↓を見てもらうと分かりますが、実はこのテキスト、改行が入っています。

ところがMicrotipを使ったポップアップ(ツールチップ)だと、改行が反映されていません。 「<br>」でも「\n」でも改行してくれませんでした。

この影響で、テキストが長いとこんな↓風に画面から溢れます。

溢れて見えなくなっているわけではなく、水平方向にスクロール↓できるようになっていました。

スクロールは妥協できなくもないですが、改行が反映されないのは視認性が最悪なのでこいつも不採用にしました。

VueTippyの導入方法

まずはターミナルからNuxt.js(またはVue.js)のフォルダに移動して、パッケージをインストール↓します。

npm install --save vue-tippy@v4

//yarnを使う場合
yarn add vue-tippy@v4

次にVueTippyのコンポーネントを登録するために、「plugins」フォルダに適当なファイルを作ります。 ここではtippy.jsとします。

tippy.jsの中身はこの↓ようにします。

import Vue from "vue";
import VueTippy, { TippyComponent } from "vue-tippy";

Vue.use(VueTippy);

Vue.component("tippy", TippyComponent);

次にこのプラグインをnuxt.config.jsに登録します。

plugins: [
  { src: '~/plugins/tippy.js' },
],

VueTippyのコードの書き方

公式サイトによると5種類の書き方があるようです。 今回は一番シンプルなもの↓を採用しました。

<button content="ポップアップ表示するテキスト" v-tippy>
表示する部分
</button>

Microtipと同様に、非常に理解しやすいコードです。

実際に動かしてみた

上記コードで動かしてみたところ、この↓ようになりました。

これまでの問題が全て解決されています。

• パソコンではホバー、スマホではタップで表示
• ホバーまたはタップした近くに表示
• 次のツールチップを表示したら前のは消える
• 改行に対応

CSSはどこで定義されているのか

インストール時のオプションにCSS関連があったので、そのファイルからポップアップ(ツールチップ)表示部分のクラス名「.tippy-tooltip」を自分でスタイリングしてみました。

動いているHTMLから開発者ツールで要素を見ようにも、ホバーがずれると表示が消えるし、Javascriptでレンダリングされているからかソースにも見当たらねぇ。

しゃーねーのでVueTippyのソースを眺めていると、JSファイル内でCSSが定義されていました。

VueTippyのポップアップ(ツールチップ)部分のカスタマイズ

背景色の設定↓はクラス「tippy-backdrop」。

.tippy-backdrop {
  background: #fff;
}

テキストやボーダーの設定↓はクラス「tippy-tooltip」。

.tippy-tooltip {
  border: 2px solid #333;
  color: #333;
  text-align: left;
  background: #fff;
}

吹き出しを表示した場合、「tippy-backdrop」の背景設定が効いていなかったので、その場合は「tippy-tooltip」の方に設定するとうまくいきました。

幅の変更はできない？

どうもmax-widthが指定されているようで、テキストが長いとこの↓ように折り返しが発生します。

これを改善しようと幅の変更をしようとしたんですが、ちょっと分かんなかったです。

挙動的にmax-widthが指定されていそうな感じですが、検索してもかからねぇ。