Holistics Design System

Hotspot ​

Stable

Draws a user's attention to a specific spot on the screen with an animated marker.

vue
<script setup lang="ts">
import { HHotspot } from '@holistics/design-system'

</script>
<template>
  <div class="relative flex size-64 items-center justify-center rounded-2xl border-2 border-strong">
    <HHotspot position="left" />
    <span class="text-helper">Container</span>
  </div>
</template>

Examples ​

Positioning ​

vue
<script setup lang="ts">
import { HHotspot } from '@holistics/design-system'

const position = { x: '10%', y: '50%' }
</script>
<template>
  <div class="relative flex size-64 items-center justify-center rounded-2xl border-2 border-strong">
    <HHotspot :position />
    <span class="text-helper">Container</span>
  </div>
</template>

API ​

Pass-through: <div> ​

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props ​

NameTypeDescription
position 
"top" | "right" | "bottom" | "left" | { x: string; y: string; }
= "left"

Position of the hotspot within its nearest position: relative container.

Use 'top' | 'bottom' | 'left' | 'right' for edge‑aligned, center‑balanced positions, or { x, y } with CSS lengths/percentages for custom placement.

noPointer 
boolean

By default, the cursor when hovering over the hotspot is a pointer. To disable it, set this to true.