32 lines
1.1 KiB
Plaintext
32 lines
1.1 KiB
Plaintext
|
# with-overlay
|
||
|
|
|
||
|
|
Our `{{with-overlay}}` modifier is a thin wrapper around the excellent `tippy.js`. The most common usage will be something like the below:
|
||
|
|
|
||
|
|
```hbs preview-template
|
||
|
|
<div
|
||
|
|
{{did-insert (set this 'popover')}}
|
||
|
|
>
|
||
|
|
The popover
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
{{with-overlay
|
||
|
|
this.popover
|
||
|
|
returns=(set this 'popoverController')
|
||
|
|
}}
|
||
|
|
|
||
|
|
{{on 'click' (fn (optional this.popoverController.show))}}
|
||
|
|
>
|
||
|
|
Click me
|
||
|
|
</button>
|
||
|
|
```
|
||
|
|
|
||
|
|
The first positional parameter is a reference to a DOM element to use for the
|
||
|
|
popover. The easiest way to provide this is to use `{{did-insert
|
||
|
|
(set this 'popoverName'}}}` on any DOM element (as seen above). This DOM element is then
|
||
|
|
automatically removed from the DOM until the popover needs to be shown.
|
||
|
|
|
||
|
|
The `returns` named attribute of the modifer allows you to save a reference to
|
||
|
|
the overlay itself, which is a reference to a [tippy.js instance](https://atomiks.github.io/tippyjs/v5/methods/).
|
||
|
|
This instance can then be used with conventional ember to control the overlay. In the example above we use `{{on 'click'}}` to show the overlay but once you have a reference to the tippy.js instance you can control it by any other means.
|
||
|
|
|