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:
- the positioned element
- the layout
- 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.