@cas-smartdesign/popover

A popover element with SmartDesign look & feel.

Attributes

• placement: string (default: "auto")
  • Defines the placement of the popper relative to the reference element
  • Valid placements are: auto, top, right, bottom, left
  • Each placement can have a variation from this list: -start, -end
  • The auto placement will place the window on the side with more space available.
• target-selector: string (default: "")
  • Defines the selector to use to find the target element
• trigger-type string (default: "click")
  • Defines the type of event for which the popover should open
  • Valid values are:
    • click - clicking on the target element
    • hover - moving the cursor on the target element
    • manual - no event handler will be set up, the popover can be opened programatically by calling the show method and hid by calling the hide method
• modal boolean (default: false)
  • Defines whether the popover is modal and closed on clicks or focusing outside of the content or target element.
• no-arrow boolean (default: false)
  • Defines whether the popover contains an arrow pointing to the reference element.
• popover-for string (default: "")
  • This value is mirrored to the opened popover-container.
  • By that the popover can be identified for example for styling purposes.
• offset string (default: "0")
  • The offset attribute lets you displace a popper element from its reference element.

Properties

• placement: Placement
  • Reflects the corresponding attribute
• targetSelector: string
  • Reflects the corresponding attribute
• triggerType: TriggerType
  • Reflects the corresponding attribute
• modal: boolean
  • Reflects the corresponding attribute
• noArrow: boolean
  • Reflects the corresponding attribute
• popoverFor: string
  • Reflects the corresponding attribute
• flipPriority: Position[]
  • Defines the preferred order of positions to place the window in order to prevent overflow
• offset: number
  • Reflects the correspondig attribute

Public methods

• show
  • Sets the open attribute to true, thus showing the popover
• hide
  • Sets the open attribute to false, thus hiding the popover
• toggle
  • Negates the value of the open attribute

Custom events

• open
  • Dispatched when the popover has opened.
• close
  • Dispatched when the popover has closed.

Adding a child element

• The first child element represents the content of the popover window.