So erstellen Sie einen Tooltip mit schwebender Benutzeroberfläche

Bei der Softwareentwicklung ist eine gute Benutzererfahrung normalerweise eines der wichtigsten Dinge, die beim Erstellen von Software berücksichtigt werden müssen. Sie müssen Ihre Benutzer nicht raten lassen, wie sie Ihre Softwareanwendung verwenden; Dies könnte die Benutzerfreundlichkeit Ihrer Anwendung beeinträchtigen, was nicht Ihren Wünschen entspricht.

Die meisten Benutzer sind ungeduldig. Sie haben möglicherweise nicht die Geduld, sich mit der Funktionsweise Ihrer App vertraut zu machen, aber mit einem Tooltip können Sie sie ganz einfach wie ein Reiseführer durch Ihre Anwendung führen.

Heute besprechen wir, wie Sie mit Floating UI ganz einfach einen Tooltip erstellen können.

Tooltip

Tooltips sind kleine, aber informative Popups, die angezeigt werden, wenn ein Benutzer mit der Maus über ein Element fährt, darauf klickt oder sich darauf konzentriert. Für einige Tooltips ist es möglicherweise nicht erforderlich, dass ein Benutzer sie auslöst. Stattdessen können sie als Leitfaden dienen, wenn ein Benutzer Ihre Anwendung zum ersten Mal besucht, und automatisch Kontext und Anweisungen bereitstellen.

Floating UI

Floating UI ist eine erstaunliche Bibliothek, mit der Sie tolle Tooltips erstellen können, deren Position je nach Bildschirmgröße einfach angepasst werden kann. Sie müssen sich keine Sorgen um die Reaktionsfähigkeit machen, Floating UI übernimmt das für Sie.

Manchmal kann das Erstellen effizienter Tooltips zeitaufwändig sein. Es erfordert einige Schritte, die Sie möglicherweise langweilig finden. Deshalb müssen Sie Bibliotheken wie Floating UI verwenden.

Voraussetzungen, die Sie benötigen, um diesen Artikel zu verstehen

1. Grundkenntnisse von React js.
2. Grundlegendes Verständnis von Javascript.
3. Auf Ihrem Computer muss Node js installiert sein (damit Ihre React-Anwendung ausgeführt werden kann)
4. Und schließlich ein Webbrowser wie Google Chrome.

Lassen Sie uns Floating UI installieren

Wir müssen Floating UI in unserer React js-Anwendung installieren. Und das können wir tun, indem wir diesen Befehl ausführen.

npm install @floating-ui/react

Wir müssen viele Funktionen aus der Floating UI-Bibliothek importieren. Mit diesen Funktionen können wir mühelos einen Tooltip erstellen.

`
importieren {
verwendenKlick,
verwendenFloating,
useInteractions,
umdrehen,
Offset,
useDismiss,
} von '@floating-ui/react';

`

Destructure useFloating

`
const {
Refs: Calendar1Refs,
FloatingStyles: Calendar1FloatingStyles,
Kontext: Calendar1Context,
} = useFloating({
offen: isOpen1,
onOpenChange: setIsOpen1,
Platzierung: 'bottom-end',
Middleware: [
flip({
fallbackPlacements: ['right'],
}),

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

Referenzen

Dadurch können wir unseren Tooltip mühelos mit seiner Referenz verknüpfen. Unsere Referenz sollte so aussehen.

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

Unser Tooltip sollte dabei so aussehen.

{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

FloatingStyles ist ein Objekt, das CSS-Stile enthält, die die genaue Position und Abmessungen Ihres schwebenden Elements (wie ein Tooltip) im Verhältnis zu seinem Referenzelement bestimmen.

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

Geöffnet

Die offene Requisite ist sehr wichtig für die Sichtbarkeit unseres Tooltips. Es hilft uns, die Sichtbarkeit unseres Tooltips basierend auf dem internen Status einer Komponente zu verwalten.

Wir erstellen zunächst einen useState mit dem Standardwert false, damit wir den Tooltip ausblenden können, bis ein Benutzer darauf klickt. Dieser useState verfolgt, ob der Tooltip derzeit geöffnet ist oder nicht.

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

onOpenChange

Dieser Rückruf hilft uns, den setIsOpen-Wert zu aktualisieren. Wenn also ein Benutzer auf ein Ereignis klickt oder es auslöst, setzen wir den Wert „false“ in „isOpen“ auf „true“ und umgekehrt.

Platzierung

Dies hilft zu bestimmen, wo unser Tooltip im Verhältnis zu seiner Referenz platziert werden soll. Wir können entscheiden, unseren Tooltip an einer dieser Positionen zu platzieren;

1. unten
2. unteres Ende
3. Untenstart
4. links
5. linkes Ende
6. Linksstart
7. richtig
8. rechtes Ende
9. Rechtsstart
10. oben
11. Top-End
12. Top-Start

Flip

Die Flip-Middleware, die sich im Middleware-Array befindet, passt die Position des schwebenden Elements automatisch an, wenn in der angegebenen Richtung nicht genügend Platz vorhanden ist. Wenn unten nicht genügend Platz vorhanden ist, wird versucht, ihn mithilfe der Fallback-Platzierungen (['bottom-end']) zu positionieren. Wir können je nach verfügbarem Platz jede gewünschte Position wählen.

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

    ],

Offset

Diese Middleware erstellt einen Abstand zwischen der Referenz und dem schwebenden Element. mainAxis: 20 erzeugt eine 20-Pixel-Lücke in der Primärrichtung (in diesem Fall unter der Referenz), während crossAxis: 50 einen 50-Pixel-Versatz entlang der senkrechten Achse erstellt.

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

So sollte die Konfiguration aussehen

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

Die Demo

Klicken Sie auf diesen Link, um das Demovideo anzusehen.

Im Video können Sie deutlich sehen, dass unser Tooltip seine Position anpasst, wenn der Platz nicht ausreicht, um es aufzunehmen. Es verwendet die Position der von uns definierten FallbackPlacements.

Fazit

Floating UI bietet eine leistungsstarke und flexible Möglichkeit, Tooltips in React-Anwendungen zu implementieren. Mit der automatischen Positionierung und den umfangreichen Anpassungsoptionen können Sie Tooltips erstellen, die das Benutzererlebnis Ihrer Anwendung verbessern und gleichzeitig zuverlässige Funktionalität auf verschiedenen Geräten und Bildschirmgrößen aufrechterhalten.

Es umfasst so viele Funktionen und Objekte wie; refs, FloatingStyles, Kontext, useState für Zustandsverwaltung, onOpenChange, Platzierung, Flip und Offset.

Wenn Sie dieser Anleitung folgen, verfügen Sie nun über das Wissen, reaktionsfähige und benutzerfreundliche Tooltips in Ihre React-Anwendungen zu implementieren. Experimentieren Sie mit verschiedenen Konfigurationen und Middleware, um das perfekte Tooltip-Erlebnis für Ihre Benutzer zu schaffen.

Viel Spaß beim Codieren?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Tooltip mit schwebender Benutzeroberfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!