Popover

Popovers are small overlays that open on demand. They can access additional content and actions without cluttering the page.

Usage

Code Editor
Copy
import { Popover } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { PopoverPlacementProps } from '@erudilabs/alma'
PopoverPlacementProps = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'

Component

Here preview and detail explain of Popover component


Default
import { useState } from 'react'
const [open, setOpen] = useState(false)

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  content={
    <div>
      <h5>Are you sure?</h5>
      <p className="text-gray-700 mt-2">
        Your account will be delete within 30 days. you will no longer be able
        to log in.
      </p>
      <div className="flex mt-4 space-x-2">
        <Button block onClick={() => setOpen(false)}>
          Cancel
        </Button>
        <Button theme="danger" block>
          Continue
        </Button>
      </div>
    </div>
  }
>
  <Button>Delete Account</Button>
</Popover>

Placement

Refers to the position or location where a tooltip appears in relation to its associated element or target, PS: The component will be detect possible possition when window resize


Top

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="top"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Top start

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="top-start"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Top end

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="top-end"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>


Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="right"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Right start

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="right-start"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Right end

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="right-end"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Bottom

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="bottom"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Bottom start

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="bottom-start"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Bottom end

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="bottom-end"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Left

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="left"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Left start

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="left-start"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Left end

Code Editor
Copy
<Popover
  open={true}
  onOpenChange={() => setOpen(!open)}
  placement="left-end"
  content={
    <p>Content should be here</p>
  }
>
  <Button>Trigger Popover</Button>
</Popover>

Props Reference

Prop
Type

placemnet?

TooltipPlacementProps

testId?

string

className?

string

content

ReactNode

open

boolean

onOpenChange

( ) => void