Control or disable popover

You can manually control a popover when selecting its coup-doeil element using javascript.

<coup-doeil id="my-popover">
    <!-- ... -->
</coup-doeil>

const coupdoeilElement = document.querySelector("coup-doeil#my-popover")

open

coupdoeilElement.openPopover()

close

coupdoeilElement.closePopover()

Check state

coupdoeilElement.dataset.popoverOpen // 'true' if popover is open, else undefined 

disabling/enabling

A coup-doeil element can be disabled so the popover won’t open, regardless of the trigger option selected.

coupdoeilElement.disabled // => false

coupdoeilElement.disabled = true

coupdoeilElement.disabled // => true

You can also select the popover element when it is displayed and close it.

<div class="coupdoeil--popover" and-other-attributes>
    <div class="my-popover-layout">
        <button type="button" id="click-me">Click me!</button>
    </div>
</div>

const clickMeButton = document.getElementById("click-me")
const popover = clickMeButton.closest(".coupdoeil--popover")
popover.close()

From the popover element, you can also reach the <coup-doeil> element it’s linked to.

popover.coupdoeilElement
// popover.close() is a shortcut for popover.coupdoeilElement.closePopover()

Using Stimulus and Turbo

If you are using both Stimulus and Turbo from Hotwired, you can set up a Stimulus controller on your popover layouts as depicted in this example.