Alpine.jsを使ってhoverで表示されるツールチップを作成する

Alpine.jsを使ってhoverで表示されるツールチップを作成する

JavaScriptフレームワークの1つであるAlpine.jsを導入して、hoverで表示されるツールチップを作成するサンプルコードを記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105
  • Alpine.js 2.7.3

Alpine.js導入

CDNから読み込んで利用します。

ツールチップを作成

「x-on・x-cloak・x-show・x-data」ディレクティブを使用して、レンジスライダーを作成してます。
CSSにtailwindを使用してます。

実行結果を確認すると「ツールチップ」が作成されていることが確認できます。