Missing Popover

[Gary Thomas]

Popover is not implemented:
https://getbootstrap.com/docs/4.3/components/popovers/

Needs Popper/tether support.

[Brian Greenacre]

@bestguy I have created a svelte component you might want to look at.

https://github.com/bgreenacre/svelte-popper

It's loosely based on react-popper (based on popper.js). Still a work in progress and I'm still learning some things about the node/npm ecosystem but I'd like your feedback on it. You can see a super basic example of it if you run npm run dev.

[Gary Thomas]

Awesome @bgreenacre ! I would love to try it out. Will let you know if I can integrate it into this.

[Eddie]

Hi @bestguy. Should I implement popover like tooltip?

<button id='btn'></button>
<Popover target="btn" ></Popover>

and Can I implement this as below?

<Popover target="...">
    <slot name=title></slot>
    <slot name=content></slot>
</Popover>

Or the props one?

<Popover title="" content="" target="" />

[Gary Thomas]

Hi @eddie0329, Thanks, I'd suggest we support:

<Popover title="Optional Title" target="blah">
  My popover content goes here.
</Popover>

And optionally allow title as slot for html content:

<Popover target="blah">
  <div slot="title">
    Optional Title with <b>HTML</b>
  </div>
  My popover content goes here.
</Popover>

Internally this would look like:

 export let title = '';

<div ...>
  <div class="popover-header">
    <slot name="title">{title}</slot>
  </div>
  <div class="popover-body">
    {#if children}
      {children}
    {:else}
      <slot />
    {/if}
  </div>
</div>

Hope this makes sense!

[Gary Thomas]

Released in v3.11.0 thank you all for the help!