フローティング UI でツールチップを作成する方法

ソフトウェア開発では、通常、ソフトウェアを構築する際に優れたユーザー エクスペリエンスを考慮することが最も重要なことの 1 つです。ソフトウェア アプリケーションの使用方法をユーザーに推測させる必要はありません。これはアプリケーションの使いやすさに影響を与える可能性があり、望んでいることではありません。

ほとんどのユーザーはせっかちで、アプリがどのように動作するかを探索して確認するほど忍耐力がないかもしれませんが、ツールチップを使用すると、ツアー ガイドのようにアプリケーションを簡単に案内できます。

今日は、フローティング UI を使用してツールチップを簡単に作成する方法について説明します。

ツールチップ

ツールチップは、ユーザーが要素の上にマウスを移動したり、要素をクリックしたり、フォーカスしたりすると表示される、小さいですが有益なポップアップです。一部のツールチップでは、ユーザーがトリガーする必要がない場合があります。代わりに、ユーザーが初めてアプリケーションにアクセスするときのガイドとして機能し、コンテキストと手順を自動的に提供します。

フローティング UI

フローティング UI は、画面サイズに基づいて位置を簡単に調整できる素晴らしいツールチップを作成できる素晴らしいライブラリです。応答性について心配する必要はありません。フローティング UI が自動的に処理します。

効率的なツールチップの作成には時間がかかり、退屈に感じるかもしれない手順がいくつか含まれるため、フローティング UI などのライブラリを使用する必要があります。

この記事を理解するために必要な前提条件

1. React js の基礎知識
2. JavaScript の基本的な理解
3. (React アプリケーションを実行するには) コンピューターに Node js がインストールされている必要があります
4. そして最後に、Google Chrome のような Web ブラウザです。

フローティング UI をインストールしましょう

React js アプリケーションに Floating UI をインストールする必要があります。このコマンドを実行することでそれを行うことができます。

npm install @floating-ui/react

フローティング UI ライブラリから多くの関数をインポートする必要があります。これらの関数を使用すると、ツールチップを簡単に作成できます。

`
インポート {
使用クリック、
useFloating、
useInteractions、
フリップ、
オフセット、
useDismiss、
} '@floating-ui/react' から;

`

デストラクチャ useFloating

`
const {
参照: カレンダー1参照、
floatStyles: Calendar1FloatingStyles,
コンテキスト: カレンダー1コンテキスト、
} = useFloating({
開く: isOpen1,
onOpenChange: setIsOpen1,
配置: 'ボトムエンド'、
ミドルウェア: [
フリップ({
fallbackPlacements: ['right']、
})、

offset({ mainAxis: 20,crossAxis: 70 }),
]、
});
`

参照

これにより、ツールチップをその参照に簡単に接続できるようになります。リファレンスは次のようになります。

<i
      className="fa-light fa-calendar cursor-pointer text-gray-500"
            ref={calendar1Refs.setReference}
           ></i>

ツールチップは次のようになります。

{isOpen1 && (
            <div
             className="absolute z-10 bg-white"
             ref={calendar1Refs.setFloating}

            >
             <Calendar onChange={handleSelectDate1} />
            </div>
           )}The difference here is that our tooltip reference has “setReference” while our tooltip has “setFloating”. This will enable them to be connect, making sure that the tooltip floats around it`s reference.

フローティングスタイル

FloatingStyles は、参照要素に対するフローティング要素 (ツールヒントなど) の正確な位置と寸法を決定する CSS スタイルを含むオブジェクトです。

{isOpen2 && (
          <div
           className="z-[9999]"
           ref={calendar1Refs.setFloating}
          >



<p><strong>Context</strong></p>

<p>In Floating UI, context (like calendar1Context in this case) provides a way to manage and share state and interactions across multiple hooks. This helps us to share events like click, hover etc. It also helps to dismiss the interactions seamlessly, ensuring that each tooltip or floating element behaves consistently.<br>
</p>

<pre class="brush:php;toolbar:false">const click1 = useClick(calendar1Context);
 const dismissCalendar1ToolTip = useDismiss(calendar1Context);

開く

開いたプロップは、ツールチップの可視性にとって非常に重要です。これは、コンポーネントの内部状態に基づいてツールチップの表示/非表示を管理するのに役立ちます。

まず、デフォルト値 false で useState を作成し、ユーザーがツールチップをクリックするまでツールチップを非表示にできるようにします。この useState は、ツールチップが現在開いているかどうかを追跡します。

const [isOpen, setIsOpen] = useState(false);

onOpenChange

このコールバックは、setIsOpen 値を更新するのに役立ちます。したがって、ユーザーがクリックするかイベントをトリガーするたびに、isOpen の false 値を true に設定し、その逆も同様です。

配置

これは、参照に関連してツールチップをどこに配置するかを決定するのに役立ちます。ツールチップをこれらの位置のいずれかに配置することを決定できます。

1. 下
2. ボトムエンド
3. ボトムスタート
4. 左
5. 左端
6. 左スタート
7. そうです
8. 右端
9. 右スタート
10. トップ
11. トップエンド
12. トップスタート

反転

指定された方向に十分なスペースがない場合、ミドルウェア配列内のフリップミドルウェアは、浮動要素の位置を自動的に調整します。ここで、下に十分なスペースがない場合は、フォールバック配置 (['bottom-end']) を使用して配置しようとします。空きスペースに応じて好きな位置を選択できます。

middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

    ],

オフセット

このミドルウェアは、参照と浮動要素の間にスペースを作成します。 mainAxis: 20 は主方向 (この場合は基準の下) に 20 ピクセルのギャップを作成し、crossAxis: 50 は垂直軸に沿って 50 ピクセルのオフセットを作成します。

middleware: [
   offset({ mainAxis: 20, crossAxis: 50 }),
  ],

構成は次のようになります

const [isOpen, setIsOpen] = useState(false);
 const {
  refs: calendar1Refs,
  floatingStyles: calendar1FloatingStyles,
  context: calendar1Context,
 } = useFloating({
  open: isOpen,
  onOpenChange: setIsOpen,
  placement: 'bottom-end',

  middleware: [
   flip({
    fallbackPlacements: ['bottom-end'],
   }),

   offset({ mainAxis: 20, crossAxis: 50 }),
  ],
 });

 const click = useClick(calendar1Context);
 const dismissImageToolTip = useDismiss(calendar1Context);

 const {
  getReferenceProps: calendar1TooltipReference,
  getFloatingProps: calendar1TooltipFloatingProps,
 } = useInteractions([click, dismissImageToolTip]);

デモ

このリンクをクリックしてデモビデオをご覧ください。

ビデオから、ツールチップを含めるのに十分なスペースがない場合、ツールチップがその位置を調整することがはっきりとわかります。定義した fallbackPlacements の位置を使用します。

結論

フローティング UI は、React アプリケーションにツールチップを実装する強力かつ柔軟な方法を提供します。自動配置と豊富なカスタマイズ オプションにより、さまざまなデバイスや画面サイズにわたって信頼性の高い機能を維持しながら、アプリケーションのユーザー エクスペリエンスを向上させるツールチップを作成できます。

これには、次のような非常に多くの関数とオブジェクトが含まれます。 refs、floatingStyles、context、状態管理用の useState、onOpenChange、配置、反転、オフセット。

このガイドに従うことで、React アプリケーションに応答性の高いユーザーフレンドリーなツールチップを実装するための知識が得られます。さまざまな構成とミドルウェアを試して、ユーザーにとって完璧なツールチップ エクスペリエンスを作成してください。

コーディングは楽しいですか?

以上がフローティング UI でツールチップを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。