ember-popperjs

![npm version](https://badge.fury.io/js/ember-popperjs)
![CI](https://github.com/NullVoxPopuli/ember-popperjs/actions/workflows/ci.yml)

A single component with easy to use API for creating popovers, tooltips, etc.

Compatibility

* Ember.js v3.25 or above
* Ember CLI v3.25 or above
* Webpack v5 or above
* ember-auto-import v2 or above

Installation

``ember install ember-popperjs`

`Usage`

Example building a

 component

hbs

  
  {{#if this.yourVisibilityIndicator}}
    

      This is a popover!
      {{yield to="default"}}
    

  {{/if}}


Things

 does not do:
 - provide styles for making a popover
 - provide click handlers for showing and hiding the popover
However, this addon pairs nicely with Tailwind CSS and HeadlessUI
and a menu popover may look like:

`hbs


  
          {{reference}}
      class="
        text-black
        relative rounded-sm border border-gray-900 bg-white px-2 py-1 -my-1 text-left
        transition ease-in-out duration-150 sm:text-sm
        focus:ring-4 focus-visible:outline-none focus:outline-none
      "
      ...attributes
    >
      {{yield menu to="trigger"}}
    
          {{popover}}
      class="absolute top-2 z-20 grid mt-1 rounded-sm bg-white shadow-lg min-w-max"
      as |items|
    >
      {{yield (component 'limber/menu/button' item=items.Item) to="options"}}

 provides the click handlers and visibility controls that make a
popover behave as you would expect.
$3
#### yield parameters

`hbs ...`

- reference- modifier - sets up the target element for the popover element to position itself to -popover- modifier - attaches to the element that is the container of the popover content #### arguments

##### @placement

The default placement is "bottom-end", but any placement described by thePlacement options on the popper.js site will work.

For example,

`hbs ...`

##### @options

If the default options don't suit you, you may override them entirely. These options are not merged with any defaults, but allow straight pass-through, of the Popper.js Options object.

Additionally, some options require references to the reference element as well as the popover element, so if you need that level of flexibility, @optionsmay also be a function with the following signature:`ts (reference: HTMLElement, popover: HTMLElement) => Partial;`

Note that if using @options, @placement` will be ignored.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

Usage

Example building a

 component

hbs

  
  {{#if this.yourVisibilityIndicator}}
    

      This is a popover!
      {{yield to="default"}}
    

  {{/if}}


Things

 does not do:
 - provide styles for making a popover
 - provide click handlers for showing and hiding the popover
However, this addon pairs nicely with Tailwind CSS and HeadlessUI
and a menu popover may look like:

`hbs


  
          {{reference}}
      class="
        text-black
        relative rounded-sm border border-gray-900 bg-white px-2 py-1 -my-1 text-left
        transition ease-in-out duration-150 sm:text-sm
        focus:ring-4 focus-visible:outline-none focus:outline-none
      "
      ...attributes
    >
      {{yield menu to="trigger"}}
    
          {{popover}}
      class="absolute top-2 z-20 grid mt-1 rounded-sm bg-white shadow-lg min-w-max"
      as |items|
    >
      {{yield (component 'limber/menu/button' item=items.Item) to="options"}}

 provides the click handlers and visibility controls that make a
popover behave as you would expect.
$3
#### yield parameters

`hbs ...`

##### @placement

The default placement is "bottom-end", but any placement described by thePlacement options on the popper.js site will work.

For example,

`hbs ...`

##### @options

If the default options don't suit you, you may override them entirely. These options are not merged with any defaults, but allow straight pass-through, of the Popper.js Options object.

Note that if using @options, @placement` will be ignored.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.