Einführung

Shadcn ist eine Go-to-Bibliothek zum Kopieren und Einfügen von UI-Komponenten in React-Projekten. Eine h?ufig verwendete Komponente ist der Tooltip, der auf @radix-ui/react-tooltip aufbaut.

Der Standard-Tooltip sieht so aus:

Hinzufügen von Tooltip-Pfeilen

W?hrend die bereitgestellte Komponente sofort gut funktioniert, hatte ich den Wunsch, weitere Anpassungen vorzunehmen – wie zum Beispiel das Hinzufügen eines Pfeils zum Tooltip. Als Inspiration habe ich mich an die Tooltip-Komponente von tremor.so gewandt, die ebenfalls auf @radix-ui/react-tooltip basiert.

Glücklicherweise ist das Hinzufügen eines Pfeils unkompliziert, da @radix-ui/react-tooltip eine Pfeilkomponente enth?lt. Sie müssen es lediglich in die Inhaltskomponente einfügen.

import * as TooltipPrimitives from '@radix-ui/react-tooltip'

export default () => (
  <TooltipPrimitives.Provider>
    <TooltipPrimitives.Root>
      <TooltipPrimitives.Trigger />
      <TooltipPrimitives.Portal>
        <TooltipPrimitives.Content>
          <TooltipPrimitives.Arrow /> // Add the Arrow component here
        </TooltipPrimitives.Content>
      </TooltipPrimitives.Portal>
    </TooltipPrimitives.Root>
  </TooltipPrimitives.Provider>
)

Was aber, wenn Sie einen Rahmen um den gesamten Tooltip, einschlie?lich des Pfeils, hinzufügen m?chten?

Hinzufügen eines Tooltip-Rahmens

Um dies zu erreichen, müssen Sie die Pfeilkomponente formatieren. Lassen Sie uns einige Ans?tze erkunden:

Naiver Ansatz

Das direkte Hinzufügen eines Rahmens zum Pfeil mithilfe von Tailwind-Klassen scheint ein guter Ausgangspunkt zu sein:

<TooltipPrimitives.Arrow
  className='border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]'
  width={12}
  height={7}
  aria-hidden='true'
/>

Dieser Ansatz funktioniert jedoch nicht wie erwartet. Die Eigenschaft ?Rahmen“ bezieht sich auf die rechteckige Grenze des Elements, nicht auf die Pfeilform selbst.

Verwenden der Eigenschaft ?Stroke“.

Da der Pfeil ein SVG-Element ist, k?nnen Sie die Eigenschaft ?Strich“ verwenden, um einen Rahmen zu definieren:

<TooltipPrimitives.Arrow
  className='border-none fill-[var(--tooltip-color)]'
  stroke='var(--tooltip-border-color)'
  stroke-width='2'
  width={12}
  height={7}
  aria-hidden='true'
/>

Das funktioniert besser, aber der obere Rand des Pfeils ist immer noch sichtbar. Um dies zu beheben, schauen wir uns eine andere Methode an.

Erkunden Sie die Schlagschatten-Option

Eine andere Methode ist die Verwendung eines Schlagschattens, um den Rand zu simulieren:

<TooltipPrimitives.Arrow
  className='-my-px border-none fill-[var(--tooltip-color)] drop-shadow-[0_1px_0_red]'
  width={12}
  height={7}
  aria-hidden='true'
/>

Dadurch wird ein optisch nahtloser Tooltip mit einem Pfeil und einem Rahmen erstellt, aber je nach Anwendungsfall ist dies m?glicherweise nicht immer die pr?ziseste L?sung.

Es ist erw?hnenswert, dass diese L?sung von der Tooltip-Komponente von Origin UI inspiriert ist, die verschiedene anpassbare Tooltip-Varianten bietet, die Entwicklungszeit sparen k?nnen.

Wie w?re es, wenn du es noch mehr stylen würdest, etwa mit meinem eigenen benutzerdefinierten SVG?

Benutzerdefinierter SVG-Pfeil

Ich besuche oft die Website von Vercel und die Dropdown-Navigationsleiste ist mir ins Auge gefallen, insbesondere der Pfeil.

Ich war neugierig, wie es entworfen wurde, ?ffnete die Entwicklungstools, untersuchte die Elemente und fand den SVG-Pfeil. Ich habe es dann kopiert und zur genaueren Betrachtung in Figma eingefügt.

Ich dachte, es k?nnte eine interessante Designwahl für einen Tooltip-Pfeil sein.

Positionierung

Die Positionierung des SVG-Pfeils h?ngt von der Platzierung des Tooltips ab – oben, unten, links oder rechts. Die Content-Komponente stellt ein datenseitiges Attribut bereit, mit dem Sie die Positionierung dynamisch anpassen k?nnen:

import * as TooltipPrimitives from '@radix-ui/react-tooltip'

export default () => (
  <TooltipPrimitives.Provider>
    <TooltipPrimitives.Root>
      <TooltipPrimitives.Trigger />
      <TooltipPrimitives.Portal>
        <TooltipPrimitives.Content>
          <TooltipPrimitives.Arrow /> // Add the Arrow component here
        </TooltipPrimitives.Content>
      </TooltipPrimitives.Portal>
    </TooltipPrimitives.Root>
  </TooltipPrimitives.Provider>
)

Als n?chstes k?nnten wir die integrierte Tooltip-Pfeilkomponente durch unser benutzerdefiniertes Design ersetzen. Es sollte perfekt funktionieren, oder?

Na ja, noch nicht ganz. Schauen Sie sich das an: Der Pfeil steckt in der Mitte des Tooltips, anstatt in der N?he des Ausl?sers positioniert zu sein.

Dieses unerwünschte Verhalten tritt auf, weil wir für jede Seite nur eine statische Position definiert haben. Stattdessen müssen wir eine dynamische Position einnehmen, um dieses Problem zu l?sen.

Dynamische Position

Beginnen wir erneut mit der integrierten Arrow-Komponente. Wenn Sie die Arrow-Komponente in den Entwicklungstools untersuchen, w?hrend Sie die ?nderung der Tooltip-Position simulieren, werden Sie feststellen, dass das SVG-Element in einen Span mit einer linken CSS-Eigenschaft eingeschlossen ist.

Dieser Wert ?ndert sich dynamisch basierend auf der Position des Tooltips. Wir k?nnen diesen linken CSS-Wert erfassen und auf unsere benutzerdefinierte Pfeilkomponente anwenden.

Um diesen linken Wert zu verfolgen, müssen wir ihn mit einem MutationObserver beobachten.

<TooltipPrimitives.Arrow
  className='border border-[var(--tooltip-border-color)] fill-[var(--tooltip-color)]'
  width={12}
  height={7}
  aria-hidden='true'
/>

Endergebnis

Es funktioniert jetzt wie erwartet ??

P.S. M?glicherweise m?chten Sie die obere Position anpassen, wenn Sie den Tooltip lieber auf der linken oder rechten Seite anzeigen m?chten.

Abschluss

Obwohl dieser Ansatz funktioniert, bin ich sicher, dass es UI-Bibliotheken gibt, die eine einfachere und flexiblere Tooltip-Gestaltung erm?glichen. Es ist jedoch eine Bereicherung, eine Problemumgehung dafür gefunden zu haben. Wenn Sie daran interessiert sind, andere Optionen zu erkunden, sollten Sie sich diese Diskussion ansehen.

Das obige ist der detaillierte Inhalt vonHackige M?glichkeit, die Tooltip-Pfeile von Shadcn anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!