Getting started

Conventions

• Hovercards are subclasses of Coupdoeil::Hovercard and live in app/hovercards. It’s common practice to create and inherit from an ApplicationHovercard that’s a subclass of Coupdoeil::Hovercard.
• Hovercard names end in -Hovercard.
• Hovercard module names are plural, as for controllers and jobs.
• Name hovercard after the resource they expose (ContactHovercard#phone_infos, not PhoneInfosHovercard#show)

Installation

In Gemfile, add:

gem "coupdoeil"

Run installer:

rails generate coupdoeil:install

    create app/hovercards/application_hovercard.rb
    create app/hovercards/layouts/hovercard.html.erb
    
Using importmap
Pin Coupdoeil
   unchanged  config/importmap.rb
Import Coupdoeil
   unchanged  app/javascript/application.js

To use Coupdoeil hovercard style, add to the HTML head of the layout:

      <%= stylesheet_link_tag "coupdoeil/hovercard" %>

Or one of two:

      <%= stylesheet_link_tag "coupdoeil/hovercard-arrow" %>
      <%= stylesheet_link_tag "coupdoeil/hovercard-animation" %>

Also make sure you have a CSS implementation of .hidden class:

        .hidden {
            display: none;
        }

Importing javascript with package.json is not supported yet, but is coming soon.

Quickstart

Use the hovercard generator to create a new Hovercard.

The generator accepts an hovercard name and a list of action names:

bin/rails generate coupdoeil:hovercard Article details tooltip

      invoke  test_unit
      create  app/hovercards/article_hovercard.rb
      create  app/hovercards/article_hovercard/details.html.erb
      create  app/hovercards/article_hovercard/tooltip.html.erb

Implementation

An Hovercard is a Ruby class that inherits from Coupdoeil::Hovercard, or more commonly from ApplicationHovercard:

class ArticleHovercard < ApplicationHovercard
  def summary
    @article = params[:article]
  end
end

and a template, located in hovercards folder:

<%# app/hovercards/contact_hovercard/details.html.erb %>
<div>
  <h4><%= @article.title %></h4>
  <p><%= @article.short_description %></p>
  <%# ... %> 
</div>

To add an hovercard to an element, wrap it with the helper:

<%= coupdoeil_hovercard_tag ArticleHovercard.with(article: @article).summary do %>
  <p><%= @article.title %></p>
<% end %>

Note that an hovercard can take arguments, as a hash passed to with method, like Action Mailer Parameterized. See more about arguments serialization.

When rendering, the hovercard will be embedded within a layout, located in app/hovercards/layouts:

<%# app/hovercards/layouts/hovercard.html.erb %>
<div class="hovercard-layout">
  <%= yield %>
</div>

To customize the hovercard, see options

Rendering hovercard outside the view context

ApplicationController.new.view_context.render(ArticleHovercard.action_menu)