Style

Coupdoeil does not need to import CSS to display hovercards. 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/hovercard" %>
  </head>

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

You can also load only one of the stylesheets:

    <%= stylesheet_link_tag "coupdoeil/hovercard-animation" %>
    <!-- or -->
    <%= stylesheet_link_tag "coupdoeil/hovercard-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 an hovercard, you can add a <div data-hovercard-arrow></div> element within the layout:

<%# app/views/layouts/hovercard.html.erb %>
<div class="shadow rounded p-2 bg-white border">
  <div data-hovercard-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 hovercard 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--hovercard [data-hovercard-arrow] {
    /* The background color of the arrow, defaults to the default layout background color */
    --co-hovercard--color: white;

    /* 
        Border variables should match the border style of the hovercard 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-hovercard-border-size: 1px;
    --co-hovercard--border-color: rgb(209 213 219);
    --co-hovercard-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-hovercard--height: 0.75rem;
    --co-hovercard--size-ratio: 1;
    --co-hovercard--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--hovercard" data-placement="top"> <!-- the hovercard positioned wrapper -->
    <div data-hovercard-arrow style="--co-hovercard--height: 0.5rem;"></div>
    <div> <!-- the hovercard layout -->
        <div></div> <!-- the hovercard 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 hovercard element.

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

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

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

Style

Animation

Arrow

Styling wrapped element when hovercard is open