HTML elements

coup-doeil tag

Coupdoeil popovers relies on the use of a custom HTML element, the coup-doeil tag. If you inspect the DOM where there is a popover set up you’ll see it:

<%= coupdoeil_popover_tag ProjectPopover.with(project: @project).summary do %>
  <p id="<%= dom_id(@project) %>"><%= @project.name %></p>
<% end %>
<coup-doeil popover-options="63r41l" 
            popover-type="summary@project" 
            popover-params='{"project":{"_cd_globalid":"gid://myapp/Project/2"}}'>
    <p id="project_2">My Project</p>
</coup-doeil>

The popover-options="63r41l" attribute that can be seen in the example above are the popover options compressed to lighten the HTML payload. If you’re interested to know how this compression works, you can take a look at #to_base36 method in Coupdoeil::Popover::OptionsSet. See inspecting options for debug or testing.

When the popover is open, the coup-doeil tag attribute data-popover-open is set to "true".

Popover element

When rendering a popover, you can think of it made of three layers:

  1. the positioned element
  2. the layout
  3. the content

The first one is fully handled by the library, but you have control over the last two elements.

The positioned element has the .coupdoeil--popover CSS class, a data-placement attribute that is set to the current popover position relative to its target, the dialog role property, and an inline style attribute to actually position it.

<div role="dialog" 
     class="coupdoeil--popover"
     data-placement="bottom-end"
     style="position: absolute; left: 675.6px; top: 355.683px;"
>
    <div class="my-popover-layout">
        <div>My popover content</div>
    </div>
</div>

Controlling the popover

If you need to control the popover, check the Control or disable popover page.