文章の長さに応じてツールチップのwidthが変化するように修正

[pm-homma]

修正内容

ツールチップの幅は固定にしていましたが、それだと文章量が増えた際に下に長くなってしまい見づらくなってしまってました。
そのため、文章の長さに合わせてツールチップの幅を自動調整するように修正しました。

調整は以下のように行いました。

CSS

• cssの以下の指定を幅を取得するために削除。javascript側で操作するようにする。
  • width
  • display: none;
  • position: absolute;

JavaScript

• ツールチップのDOMを.acf-input内から.acf-labelに移動する前に、.acf-input内でツールチップのwidthを取得する。

  • このときに、display: none;ではなく、opacity: 0;にすることで、widthを取得しています。

• アイコンにhoverされたときに、上記で取得していたwidthをツールチップのwidthに指定する

• display: none; とposition: absolute; を指定する。

Before/After画像

修正前

修正後

[kazunao-anahara]

@pm-homma
ツールチップを表示したまま、ブラウザのウィンドウのサイズを小さくしてタブレット表示サイズに変更したり、逆に大きくした時に崩れないかが気になりました。