Svelte-popover

Installation

 npm i svelte-popover --save-dev

Usage

The basic example

 	    
    <Popover>
      <button slot=target>Click</button>
      <div slot=content>
        <h1>Content</h1>
      </div>
    </Popover>

See more examples

You can also use nested popovers

 	    
    <Popover>
      <button slot=target>Click</button>
      <div slot=content>
        <h1>Content</h1>
        <Popover>
          <button slot=target></button>
          <div slot=content>
            <h1>Content</h1>
          </div>
        </Popover>
      </div>
    </Popover>

Use let:open directive. For example

 	    
    <Popover let:open={isOpen}>
      <button slot=target class:active={isOpen}>Target</button>
      <div slot=content>
        <h1>Content</h1>
      </div>
    </Popover>

Props

Prop	Type	Description	Default	Required
let:open	Boolean	Returns the value of the visibility of a popover	...	✘
arrow	Boolean	If `false` , the arrow is removed	`true`	✘
placement	String	The placement of the popover. `top-start` , `top-center` , `top-end` , `left-start` , `left-center` , `left-end` , `right-start` , `right-center` , `right-end` , `bottom-start` , `bottom-center` , `bottom-end`	`auto`	✘
action	String	`click` \| `hover` . Supports touch event	`click`	✘
on:open	Function	`on:open` is dispatched/called when the content is mounted	...	✘
on:close	Function	`on:close` is dispatched/called after the content is unmounted from the dom	...	✘
open	Boolean	Whether the popover is visible. Passing this prop puts the popover in controlled mode.To make the popover completely manageable, you must pass the `null` value to the `action` prop	false	✘
zIndex	Number	Initial number for zIndex	`1000`	✘
overlayColor	String	Set the background color of an overlay element	`rgba(0,0,0,0.5)`	✘
preventDefault	Boolean	Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur. more	`false`	✘
stopPropagation	Boolean	Stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed. more	`false`	✘