Hackige Möglichkeit, die Tooltip-Pfeile von Shadcn anzupassen

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!