Vue: Vuetify <v-tooltip> 위치 미세 조정 방법

Vuetify <v-tooltip>의 nudge-* 속성 공식 안내

• Vuetify의 <v-tooltip> 컴포넌트는 기본 위치(상/하/좌/우)에 더해서 아래 속성들로 툴팁 좌표를 픽셀 단위로 미세 조정할 수 있습니다.

  • 각 속성에는 숫자값(대부분 px 단위)을 넣으며, 툴팁이 해당 방향으로 해당 픽셀만큼 이동하게 됩니다.

  • nudge-right

  • nudge-left

  • nudge-top

  • nudge-bottom

사용법 예시

<v-tooltip nudge-right="10" nudge-top="5">
  <template v-slot:activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Button</v-btn>
  </template>
  <span>Tooltip text</span>
</v-tooltip>

• 위의 예시에서는

  • 기본 위치에서 오른쪽으로 10px, 위로 5px 툴팁이 이동합니다.

사용 팁

• 필요한 방향(nudge-xxx)만 지정하면 됩니다.

• 보통 copy & paste 해서 숫자만 바꿔가며 UI를 직접 보면서 맞추면 됩니다.

• 숫자는 양수 또는 음수 모두 가능 (음수인 경우 반대방향으로 이동)

공식 문서 내용 요약

• 공식 문서 API 표에는 간단히만 표시되어 있지만,

• overlay 계열 컴포넌트 모두에서 이 nudge 옵션들은 지원되며, 툴팁 위치를 세밀하게 조절할 때 가장 간단하고 직관적으로 사용할 수 있습니다.

• 추가로, 포지션을 더 상세히 제어하고 싶을 땐 locationStrategy 및 location 등도 활용 가능하지만 그냥 픽셀 단위 미세 조정이면 nudge-*가 훨씬 쉽고 편리합니다.

• 참고 문서

  • 공식 문서: Vuetify Tooltips - Components

  • API 상세: v-tooltip