Popovers

These are useful for quickly showing additional information, or even embedded forms. Popovers have automatic focus trapping and are fully accessible.

<popover width="300px">
   <popover-trigger class="p-2 border border-[--gray] rounded-md text-sm bg-white text-black">
      Open popover
   </popover-trigger>
   <popover-content>
      <div class="grid gap-4">
         <div class="space-y-2">
            <h4 class="font-medium leading-none">Dimensions</h4>
            <p class="text-sm text-muted-foreground">
               Set the dimensions for the layer.
            </p>
         </div>
         <div class="grid gap-2">
            <div class="">
               <label for="title">Width</label>
               <input 
                  class="form-control" 
                  type="text"
                  name="width" 
                  value="100%" 
                  placeholder="" />
            </div>
            <div class="">
               <label for="title">Max width</label>
               <input 
                  class="form-control" 
                  type="text"
                  name="maxwidth" 
                  value="300px" 
                  placeholder="" />
            </div>
            <div class="">
               <label for="title">Height</label>
               <input 
                  class="form-control" 
                  type="text"
                  name="height" 
                  value="25px" 
                  placeholder="" />
            </div>
            <div class="">
               <label for="title">Max height</label>
               <input 
                  class="form-control" 
                  type="text"
                  name="maxheight" 
                  value="none" 
                  placeholder="" />
            </div>
         </div>
      </div>
   </popover-content>
</popover>