Style

Coupdoeil does not need to import CSS to display popovers. However, the gem proposes built-in animation and arrow style. To load all CSS, add import to layout file:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <%= stylesheet_link_tag "coupdoeil/popover" %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

You can also load only one of the stylesheets:

    <%= stylesheet_link_tag "coupdoeil/popover-animation" %>
    <!-- or -->
    <%= stylesheet_link_tag "coupdoeil/popover-arrow" %>

Animation

See animation option page for available animations.

Animation uses el-transition library, and so you need an implementation of the .hidden class such as:

.hidden {
    display: none;
}

Arrow

To display an arrow on the side of a popover, you can add a <div data-popover-arrow></div> element within the layout:

<%# app/views/layouts/popover.html.erb %>
<div class="shadow rounded p-2 bg-white border">
  <div data-popover-arrow></div>
  <%= yield %>
</div>

With default style, the arrow will be rendered appropriately so it points to the middle of the target on which the popover is attached.

See arrow option page for solutions to hide arrow on a per-action basis.

Arrow style is based on CSS variables you can edit so the arrow fits your style:

.coupdoeil--popover [data-popover-arrow] {
    /* The background color of the arrow, defaults to the default layout background color */
    --co-popover--color: white;

    /* 
        Border variables should match the border style of the popover element, 
        defaults here match the default layout style.
        Note that depending on browser and screen resolution, 
        setting border size to 0 won't completely hide its border, 
        it is recommended to also set border-color to transparent 
    */
    --co-popover-border-size: 1px;
    --co-popover--border-color: rgb(209 213 219);
    --co-popover-border-style: solid; /* */

    /* 
        By default, arrow is as tall as it is wide,
        it is recommended to only change height and ratio and let width
        be computed out of this values 
    */
    --co-popover--height: 0.75rem;
    --co-popover--size-ratio: 1;
    --co-popover--width: calc(var(--arrow-height) / var(--arrow-size-ratio));
}

For example, you can change the size of the arrow by changing the according CSS variable on inline style of the arrow element:

<div class="coupdoeil--popover" data-placement="top"> <!-- the popover positioned wrapper -->
    <div data-popover-arrow style="--co-popover--height: 0.5rem;"></div>
    <div> <!-- the popover layout -->
        <div></div> <!-- the popover content -->
    </div>
</div>

It is recommended to change its size by changing its height only, and its shape by change its size-ratio, since width is calculated from these two variables.

You can also implement your own arrow style by relying on the position set on the popover element.

<div class="coupdoeil--popover" data-placement="top"> <!-- the popover positioned wrapper -->
    <div data-popover-arrow></div>
    <div> <!-- the popover layout -->
        <div></div> <!-- the popover content -->
    </div>
</div>

If you want to change the style of an element within a <coup-doeil> tag when the popover is open, you can use an attribute selector since data-popover-open is set to true. eg:

coup-doeil[data-popover-open] a {
    color: blue;
}

Style

Animation

Arrow

Styling wrapped element when popover is open