在軟件開發(fā)中，良好的用戶體驗通常是構(gòu)建軟件時要考慮的最重要的事情之一。您不必讓用戶猜測如何使用您的軟件應(yīng)用程序；這可能會影響您的應(yīng)用程序的可用性，這不是您想要的。

大多數(shù)用戶都很不耐煩，他們可能沒有足夠的耐心去探索和了解您的應(yīng)用程序是如何工作的，但是通過工具提示，您可以像導(dǎo)游一樣輕松地引導(dǎo)他們?yōu)g覽您的應(yīng)用程序。

今天，我們將討論如何使用浮動 UI 輕松構(gòu)建工具提示。

工具提示

工具提示是小但信息豐富的彈出窗口，當(dāng)用戶將鼠標(biāo)懸停在、單擊或聚焦于某個元素時會出現(xiàn)。某些工具提示可能不需要用戶觸發(fā)它們；相反，它們可以在用戶第一次訪問您的應(yīng)用程序時充當(dāng)指南，自動提供上下文和說明。

浮動界面

浮動 UI 是一個令人驚嘆的庫，它使您能夠創(chuàng)建很棒的工具提示，可以根據(jù)屏幕尺寸輕松調(diào)整其位置。您不必?fù)?dān)心響應(yīng)能力，浮動 UI 會為您處理這個問題。

有時，創(chuàng)建高效的工具提示可能會很耗時，它涉及到一些您可能會覺得無聊的步驟，這就是為什么您必須使用像 Floating UI 這樣的庫。

理解本文所需的先決條件

1. React js 基礎(chǔ)知識。
2. 對 javascript 的基本了解。
3. 您的計算機上必須安裝 Node js（React 應(yīng)用程序才能運行）
4. 最后，像 Google Chrome 這樣的網(wǎng)絡(luò)瀏覽器。

讓我們安裝浮動 UI

我們必須在 React js 應(yīng)用程序中安裝 Floating UI。我們可以通過運行此命令來做到這一點。

npm install @floating-ui/react

我們需要從 Floating UI 庫中導(dǎo)入大量函數(shù)，這些函數(shù)將使我們能夠輕松創(chuàng)建工具提示。

`
導(dǎo)入{
使用點擊，
使用浮動，
使用互動，
翻轉(zhuǎn)，
偏移量，
使用關(guān)閉，
} 來自 '@floating-ui/react';

`

解構(gòu)使用Floating

`
常量 {
參考文獻：calendar1Refs，
floatStyles：calendar1FloatingStyles，
上下文：calendar1Context，
} = useFloating({
打開： isOpen1,
onOpenChange: setIsOpen1,
位置：'底部'，
中間件：[
翻轉(zhuǎn)（{
FallbackPlacements: ['右'],
}),

偏移量({ mainAxis: 20, crossAxis: 70 }),
],
});
`

參考文獻

這使我們能夠輕松地將工具提示與其參考連接起來。我們的參考應(yīng)該是這樣的。

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

我們的工具提示應(yīng)該如下所示。

{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);

開放

open 屬性對于工具提示的可見性非常重要。它幫助我們根據(jù)組件的內(nèi)部狀態(tài)管理工具提示的可見性。

我們首先創(chuàng)建一個默認(rèn)值為 false 的 useState，以便我們可以隱藏工具提示，直到用戶單擊它。此 useState 跟蹤工具提示當(dāng)前是否打開。

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

onOpenChange

這個回調(diào)幫助我們更新setIsOpen值。因此，每當(dāng)用戶點擊或觸發(fā)事件時，我們都會將 isOpen 中的 false 值設(shè)置為 true，反之亦然。

放置

這有助于確定相對于其引用的工具提示的放置位置。我們可以決定將工具提示放置在這些位置中的任何一個；

1. 底部
2. 底端
3. 底部開始
4. 左
5. 左端
6. 左開始
7. 對
8. 右端
9. 右開始
10. 頂
11. 高端
12. 頂級開始

翻轉(zhuǎn)

如果指定方向沒有足夠的空間，中間件數(shù)組內(nèi)的翻轉(zhuǎn)中間件會自動調(diào)整浮動元素的位置。在這里，如果下面沒有足夠的空間，它將嘗試使用后備放置（['bottom-end']）來定位它。我們可以根據(jù)可用空間選擇任何我們想要的位置。

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

    ],

偏移

該中間件在引用和浮動元素之間創(chuàng)建間距。 mainAxis: 20 在主方向上創(chuàng)建 20px 間隙（在本例中位于參考下方），而 crossAxis: 50 沿垂直軸創(chuàng)建 50px 偏移。

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]);

演示

點擊此鏈接觀看演示視頻。

從視頻中，您可以清楚地看到，如果空間不足以容納我們的工具提示，它會調(diào)整其位置。它使用我們定義的fallbackPlacements的位置。

結(jié)論

浮動 UI 提供了一種強大而靈活的方式來在 React 應(yīng)用程序中實現(xiàn)工具提示。憑借其自動定位和豐富的自定義選項，您可以創(chuàng)建工具提示來增強應(yīng)用程序的用戶體驗，同時在不同設(shè)備和屏幕尺寸上保持可靠的功能。

它涉及很多功能和對象，例如； refs、floatingStyles、context、用于狀態(tài)管理的 useState、onOpenChange、放置、翻轉(zhuǎn)和偏移。

通過遵循本指南，您現(xiàn)在已經(jīng)掌握了在 React 應(yīng)用程序中實現(xiàn)響應(yīng)式且用戶友好的工具提示的知識。嘗試不同的配置和中間件，為您的用戶創(chuàng)建完美的工具提示體驗。

編碼愉快？

以上是如何使用浮動 UI 創(chuàng)建工具提示的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！