esniiava

Overlays

Create modal dialogues, tooltips, and context menus with smooth animations and intuitive interactions.

Overlay Types

Modals

Full-screen overlays for important user interactions with optional scroll locking and animation control. 


// Modal Component
import { Modal } from '@esniiava/overlays'

function App() {
  return (
    <Modal 
      isOpen={modalOpen}
      onClose={setModalOpen(false)}
    >
      <div class="p-6">This is a modal</div>
    </Modal>
  )
}

Preview

Modal Content

Tooltips

Compact context-sensitive labels that appear on hover or focus for interface elements. 


import { Tooltip } from '@esniiava/overlays'

<Tooltip content="Edit Item">
  <button class="text-gray-500 hover:text-gray-900">
    <span class="w-4 h-4" aria-hidden="true"></span>
  </button>
</Tooltip>

Preview

Popovers

Contextual panels appearing above UI elements with customizable anchors and animations. 


import { Popover } from '@esniiava/overlays'

<Popover anchor="bottom" class="w-64">
  <button class="focus:outline-none">More Options</button>
  <div class="py-3 px-4 border border-gray-200 rounded-lg">
    <ul class="space-y-2">
      <li><button class="w-full text-left hover:bg-gray-100 p-2 rounded">Edit</button></li>
      <li><button class="w-full text-left hover:bg-gray-100 p-2 rounded">Delete</button></li>
    </ul>
  </div>
</Popover>

Preview

Customization

Theming Options


// Customize overlay theme
import { OverlayStyles } from '@esniiava/themes'

OverlayStyles.set({
  modal: {
    background: ' bg-gray-900',
    padding: ' p-6'
  },
  tooltip: {
    color: ' text-indigo-50'
  }
})

Preview

Custom Modal
Custom Tooltip

Animation Support

Add smooth transitions to all overlays using configurable animation settings. 


import { useOverlayAnimation } from '@esniiava/overlays'

function CustomOverlay() {
  const animation = useOverlayAnimation({
    appear: 'fade', 
    duration: 200
  })
  
  return (
    // Overlay implementation...
  )
}

Animation States

API

Component Props

Modal
  • isOpen (boolean) - Controls visibility
  • onClose (function) - Closes overlay
  • animation (object) - Custom animation config
  • className (string) - Styling customization
Tooltip
  • content (JSX) - Tooltip content
  • duration (number) - Show timeout in ms
  • className (string) - Custom styles
  • placement (string) - Positioning strategy
  • trigger (string) - Hover|Focus|Click
```