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

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

今天，我們將討論如何使用浮動 UI 輕鬆建立工具提示。

工具提示

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

浮動介面

浮動 UI 是一個令人驚嘆的庫，它使您能夠創(chuàng)建很棒的工具提示，可以根據(jù)螢?zāi)怀叽巛p鬆調(diào)整其位置。您不必擔心回應(yīng)能力，浮動 UI 會為您處理這個問題。

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

理解本文所需的先決條件

1. React js 基礎(chǔ)。
2. 對 javascript 的基本了解。
3. 您的電腦上必須安裝 Node js（React 應(yīng)用程式才能運行）
4. 最後，像 Google Chrome 這樣的網(wǎng)頁瀏覽器。

讓我們安裝浮動 UI

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

npm install @floating-ui/react

我們需要從 Floating UI 庫中匯入大量函數(shù)，這些函數(shù)將使我們能夠輕鬆建立工具提示。

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

`

解構(gòu)使用Floating

`
常數(shù) {
參考文獻：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)管理工具提示的可見性。

我們首先建立一個預設(shè)值為 false 的 useState，以便我們可以隱藏工具提示，直到使用者點擊它。此 useState 追蹤工具提示目前是否開啟。

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

onOpenChange

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

放置

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

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

翻轉(zhuǎn)

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

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

    ],

偏移

此中間件在參考和浮動元素之間建立間距。 mainAxis: 20 在主方向上建立 20px 間隙（在本例中位於參考下方），而 crossAxis: 50 沿垂直軸建立 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]);

示範

點擊此連結(jié)觀看示範影片。

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

結(jié)論

浮動 UI 提供了一種強大且靈活的方式來在 React 應(yīng)用程式中實現(xiàn)工具提示。憑藉其自動定位和豐富的自訂選項，您可以建立工具提示來增強應(yīng)用程式的使用者體驗，同時在不同裝置和螢?zāi)怀叽缟媳３挚煽康墓δ堋?

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

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

編碼愉快？

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