TailWindCSSとAlpineJSを使用したツールチップ

このチュートリアルでは、TailWindCSSとAlpineJjsを使用してツールヒントを作成し、Laravelコンポーネントにロジックをカプセル化します.チュートリアルの最後に、以下のようなツールヒントがあります.

さらに開始する前に、AlpineJjsとTailWindCSSと共にインストールされたLaravelプロジェクトがあることを確認してください.これらの依存関係の両方を自動的にインストールするには、Laravelプロジェクトで風をインストールすることをお勧めします.
私たちの目的は、ヘルプのアイコンを作成し、ユーザーがアイコンにマウスを移動すると、それはツールチップとしてヘルプテキストを表示します.
だからまずすべてのヘルプアイコンが必要になります.TailWindCSSはHeroIconsを使用しているので、次のSVGを持っている円のアイコン、クエスチョンマークを拾う.

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

以下のようにスパンタグ内にカプセル化します

<span class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
</span>

ここでは、TailWindCSSから以下のクラスを使用しています.

ML - 2 : 0.5レムの余白

H - 5、W - 5:高さと1.25レムの幅

カーソルポインタ:mouseover上でポインターにカーソルスタイルを変えること
これらのクラスを要件ごとに変更できます.
さて、このスパンの中にツールチップを表示するDIVも含めましょう.

<span class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
  <div>
     This is the Tooltip.
  </div>
</span>

我々は最初にこのdivを隠す必要があります、そして、ユーザーがSVGの上にマウスを動かすとき、それを表示するだけです.これを達成するためにalpinejsを使用します.
まず最初にalpinejsデータを定義します.

x-data="{ tooltip: false }"

x-onにこのプロパティをtrueに設定し、mouseoverにこのプロパティをfalseに設定するように指示します.

x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false"

最後に、このプロパティを使用して、mouseleaveディレクティブを使用してdivを表示し隠します.

x-show="tooltip" 

現在のコードは以下のようになります.

<span 
    x-data="{ tooltip: false }" 
    x-on:mouseover="tooltip = true" 
    x-on:mouseleave="tooltip = false"
    class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
  <div x-show="tooltip">
     This is the Tooltip.
  </div>
</span>

私たちのツールチップは現在動作するはずです.しかし、TowWindCSSクラスを以下の部門に適用することで、さらに改善することができます.

  <div x-show="tooltip" 
      class="text-sm text-white absolute bg-blue-400 rounded-lg p-2
 transform -translate-y-8 translate-x-8">
     This is the Tooltip.
  </div>

次のTailWindCSSクラスを適用しました

テキストSM:ツールチップテキストをより小さく

にしてください

テキストホワイト:ツールヒントテキスト

にホワイトカラーを適用する

アブソリュート:それは周囲の要素

を乱さないように絶対位置を与えるために
ブルーシェードの背景色
LG : を適用します

P - 2:5レムのパディング

変換:次の翻訳クラスを適用できるように

-翻訳- Y - 8翻訳- X - 8:X軸とY軸

の上でテキストを移すこと
この段階では、チュートリアルの開始時にイメージに示すような出力を持つ必要があります.また、複数のツールヒントを刃ファイルに含めることもできます.
しかし、すべてのロジックをコンポーネントに移しましょう.ファイルをx-showで作成し、すべてのコードをこのファイルに移動します.

<span 
    x-data="{ tooltip: false }" 
    x-on:mouseover="tooltip = true" 
    x-on:mouseleave="tooltip = false"
    class="ml-2 h-5 w-5 cursor-pointer">
  <!-- SVG Goes Here -->
  <div x-show="tooltip"
    class="text-sm text-white absolute bg-blue-400 rounded-lg 
    p-2 transform -translate-y-8 translate-x-8"
  >
     {{$slot}}
  </div>
</span>

ツールヒントテキストをresources/views/components/tooltip.blade.phpに置き換えた方法に注意してください.今では刃ファイル内でこのコンポーネントを呼び出すこともできますし、以下のようなツールヒントテキストも渡すことができます.

<x-tooltip>This is the Tooltip Text</x-tooltip>

上記のコードは、ツールチップを我々の刃ファイルに使用する方法を示します.また、ツールヒントの動作を変更したい場合は、コンポーネントファイルでのみ行う必要があります.
この記事をお楽しみください.同様の記事については、あなたは私に従うことができます