Skip to content

Latest commit

 

History

History
31 lines (25 loc) · 1.1 KB

popover.md

File metadata and controls

31 lines (25 loc) · 1.1 KB
Raw

Popover Component

popover

Usage

import { Popover } from "tailwindcss-stimulus-components"
application.register('popover', Popover)
<div class="inline-block relative cursor-pointer" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
  <span class="underline">Hover me</span>
  <div class="hidden absolute left-0 bottom-7 w-max bg-white border border-gray-200 shadow rounded p-2"
       data-popover-target="content"
       data-transition-enter="transition-opacity ease-in-out duration-300"
       data-transition-enter-from="opacity-0"
       data-transition-enter-to="opacity-100"
       data-transition-leave="transition-opacity ease-in-out duration-300"
       data-transition-leave-from="opacity-100"
       data-transition-leave-to="opacity-0"
    >
    This popover shows on hover
  </div>
</div>

data-popover-target="content" defines which element will contain the actual content in the popover.

data-popover-dismiss-after-value can be provided to make the popover dimiss after x miliseconds. Default is undefined.