Vue Component Library

Appearance

Spotlight Overlay Component ​

A powerful spotlight overlay component that creates guided tours, tooltips, and interactive highlights with smooth animations and customizable positioning.

Overview ​

The Spotlight Overlay component provides:

  • Interactive highlighting of specific elements on the page
  • Floating instruction bars with customizable content and positioning
  • Smooth animations and transitions for better user experience
  • Multiple arrow positions for optimal placement around elements
  • Clip path masking to focus attention on specific areas
  • Customizable styling and theming options
  • Accessibility features with focus management and keyboard navigation
  • Event handling for user interactions and callbacks

When to Use ​

Use the Spotlight Overlay component when you need to:

  • Create guided tours or onboarding experiences
  • Highlight specific UI elements for user attention
  • Display contextual instructions or tooltips
  • Guide users through complex workflows
  • Provide interactive help and guidance
  • Create modal-like overlays with specific focus areas
  • Implement step-by-step tutorials
  • Show contextual information without blocking the entire interface

Key Features ​

Core Functionality ​

  • Element Highlighting: Automatically calculate and highlight target elements
  • Dynamic Positioning: Smart arrow positioning based on element location and screen boundaries
  • Clip Path Masking: Create focused areas while dimming the rest of the interface
  • Smooth Animations: CSS transitions and keyframe animations for smooth user experience

Advanced Features ​

  • Multiple Arrow Positions: Support for 12 different arrow positions (top, bottom, left, right, and their variants)
  • Customizable Content: Flexible instruction bar with title, buttons, and close functionality
  • Event Handling: Comprehensive callback system for user interactions
  • Responsive Design: Adapts to different screen sizes and element positions
  • Focus Management: Proper accessibility with focus handling and blur events

User Experience ​

  • Non-intrusive: Allows interaction with other elements when configured
  • Smooth Transitions: Animated position changes and content updates
  • Visual Feedback: Clear visual indicators and hover effects
  • Keyboard Navigation: Full keyboard accessibility support

Quick Start ​

vue
<template>
  <div>
    <button id="target-button" @click="showSpotlight">
      Click me to show spotlight
    </button>
    
    <OSpotOverlay />
  </div>
</template>

<script setup>
import { OSpotOverlay } from '@/components'
import { useSpotlightOverlay } from '@/composables'

const { setInstructionBarConfigByElementId } = useSpotlightOverlay()

const showSpotlight = () => {
  setInstructionBarConfigByElementId({
    elementId: 'target-button',
    arrowPosition: 'top',
    isVisible: true,
    config: {
      title: 'This is a spotlight overlay!',
      button: {
        label: 'Got it',
        callback: () => console.log('Button clicked!')
      }
    }
  })
}
</script>

Basic Usage ​

Simple Highlight ​

javascript
import { useSpotlightOverlay } from '@/composables/useSpotlightOverlay'

const { setInstructionBarConfigByElementId } = useSpotlightOverlay()

// Highlight an element with basic instruction
setInstructionBarConfigByElementId({
  elementId: 'my-element',
  arrowPosition: 'top',
  isVisible: true,
  config: {
    title: 'Look at this element!'
  }
})

With Action Button ​

javascript
setInstructionBarConfigByElementId({
  elementId: 'submit-button',
  arrowPosition: 'top',
  isVisible: true,
  config: {
    title: 'Click here to submit your form',
    button: {
      label: 'Submit',
      callback: () => {
        // Handle button click
        document.getElementById('submit-button').click()
      }
    }
  }
})

Advanced Configuration ​

javascript
setInstructionBarConfigByElementId({
  elementId: 'complex-element',
  arrowPosition: 'bottomRight',
  isVisible: true,
  config: {
    title: 'This is a complex element with advanced features',
    button: {
      label: 'Continue',
      callback: () => {
        // Custom action
        console.log('Moving to next step')
      }
    },
    hideArrowIcon: false,
    allowInteractionWithOtherElements: true,
    closeButtonCallBack: () => {
      console.log('Spotlight closed')
    },
    onBlur: () => {
      console.log('Lost focus')
    }
  }
})

Arrow Positions ​

The component supports 12 different arrow positions:

  • top - Arrow pointing down from above
  • topLeft - Arrow pointing down from above, positioned left
  • topRight - Arrow pointing down from above, positioned right
  • topExtremeLeft - Arrow pointing down from above, extreme left position
  • topExtremeRight - Arrow pointing down from above, extreme right position
  • bottom - Arrow pointing up from below
  • bottomLeft - Arrow pointing up from below, positioned left
  • bottomRight - Arrow pointing up from below, positioned right
  • bottomExtremeLeft - Arrow pointing up from below, extreme left position
  • bottomExtremeRight - Arrow pointing up from below, extreme right position
  • left - Arrow pointing right from the left side
  • right - Arrow pointing left from the right side

Configuration Options ​

The component accepts various configuration options for customization:

  • Content: Title, button text, and callbacks
  • Positioning: Arrow position and element targeting
  • Styling: Custom classes and visual appearance
  • Behavior: Interaction modes and animation settings
  • Accessibility: Focus management and keyboard navigation

API Reference →

View Code →