Shadcn의 툴팁 화살표를 사용자 정의하는 해킹 방법

소개

Shadcn은 React 프로젝트의 UI 구성요소 복사-붙여넣기를 위한 라이브러리입니다. 일반적으로 사용되는 구성 요소 중 하나는 @radix-ui/react-tooltip 위에 구축된 Tooltip입니다.

기본 도구 설명은 다음과 같습니다.

도구 설명 화살표 추가

제공된 구성요소는 기본적으로 잘 작동하지만 툴팁에 화살표를 추가하는 등 더 많은 사용자 정의를 추가하고 싶었습니다. 영감을 얻기 위해 역시 @radix-ui/react-tooltip을 기반으로 하는 tremor.so의 Tooltip 구성 요소를 참조했습니다.

다행히 @radix-ui/react-tooltip에 Arrow 구성 요소가 포함되어 있으므로 화살표를 추가하는 것은 간단합니다. 콘텐츠 구성요소 안에 포함시키기만 하면 됩니다.

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

그런데 화살표를 포함한 전체 툴팁 주위에 테두리를 추가하고 싶다면 어떻게 해야 할까요?

도구 설명 테두리 추가

이를 달성하려면 화살표 구성 요소의 스타일을 지정해야 합니다. 몇 가지 접근 방식을 살펴보겠습니다.

순진한 접근 방식

Tailwind 클래스를 사용하여 Arrow에 직접 테두리를 추가하는 것이 좋은 출발점인 것 같습니다.

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

그러나 이 접근 방식은 예상대로 작동하지 않습니다. 테두리 속성은 화살표 모양 자체가 아닌 요소의 직사각형 경계에 적용됩니다.

스트로크 속성 사용

화살표는 SVG 요소이므로 스트로크 속성을 사용하여 테두리를 정의할 수 있습니다.

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

이렇게 하면 더 잘 작동하지만 화살표의 위쪽 테두리는 여전히 표시됩니다. 이 문제를 해결하려면 다른 방법을 살펴보겠습니다.

드롭 섀도우 옵션 살펴보기

또 다른 방법은 그림자를 사용하여 테두리를 시뮬레이션하는 것입니다.

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

이렇게 하면 화살표와 테두리가 포함된 시각적으로 원활한 도구 설명이 생성되지만 사용 사례에 따라 항상 가장 정확한 솔루션이 아닐 수도 있습니다.

이 솔루션은 개발 시간을 절약할 수 있는 다양한 사용자 정의 가능한 도구 설명 변형을 제공하는 Origin UI의 도구 설명 구성 요소에서 영감을 받았다는 점을 언급할 가치가 있습니다.

나만의 맞춤형 SVG를 사용하는 등 더욱 스타일을 살려보는 것은 어떨까요?

사용자 정의 SVG 화살표

저는 Vercel의 웹사이트를 자주 방문하는데, 특히 화살표가 제 눈길을 끌었습니다.

어떻게 디자인됐는지 궁금해서 개발 도구를 열고 요소를 살펴보니 SVG 화살표가 보였습니다. 그런 다음 자세히 살펴보기 위해 복사하여 Figma에 붙여넣었습니다.

툴팁 화살표에 대한 흥미로운 디자인 선택이 될 수 있다고 생각했습니다.

포지셔닝

SVG 화살표 위치는 도구 설명의 위치(상단, 하단, 왼쪽 또는 오른쪽)에 따라 다릅니다. 콘텐츠 구성 요소는 위치 지정을 동적으로 조정하는 데 사용할 수 있는 데이터 측 속성을 노출합니다.

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

다음으로 내장된 도구 설명 Arrow 구성 요소를 맞춤형 디자인으로 교체할 수 있습니다. 완벽하게 작동해야겠죠?

아직은 아닙니다. 이것을 보세요: 화살표가 트리거 근처에 위치하지 않고 툴팁 중앙에 붙어 있습니다.

이러한 바람직하지 않은 동작은 각 측면에 대해 정적 위치만 정의했기 때문에 발생합니다. 대신 이 문제를 해결하려면 동적 위치를 사용해야 합니다.

동적 위치

내장된 Arrow 구성 요소를 다시 사용해 시작해 보겠습니다. 도구 설명 위치 변경을 시뮬레이션하는 동안 개발 도구에서 화살표 구성 요소를 검사하면 SVG 요소가 왼쪽 CSS 속성이 있는 범위에 래핑되어 있음을 알 수 있습니다.

이 값은 툴팁 위치에 따라 동적으로 변경됩니다. 이 왼쪽 CSS 값을 캡처하여 사용자 정의 화살표 구성 요소에 적용할 수 있습니다.

이 왼쪽 값을 추적하려면 MutationObserver를 사용하여 관찰해야 합니다.

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

최종 결과

지금은 예상대로 작동하고 있나요 ??

추신 툴팁을 왼쪽이나 오른쪽에 표시하고 싶다면 상단 위치를 조정하는 것이 좋습니다.

결론

이 접근 방식이 효과적이기는 하지만 더 쉽고 유연한 툴팁 스타일을 허용하는 UI 라이브러리가 있을 것이라고 확신합니다. 그러나 이에 대한 해결 방법을 찾은 것은 보람 있는 일이라고 생각합니다. 다른 옵션을 알아보고 싶다면 이 토론을 확인해 보세요.

위 내용은 Shadcn의 툴팁 화살표를 사용자 정의하는 해킹 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!