{"id":32932906,"url":"https://github.com/pagehey/coupdoeil","last_synced_at":"2026-04-18T04:01:51.206Z","repository":{"id":304330624,"uuid":"1018476838","full_name":"Pagehey/coupdoeil","owner":"Pagehey","description":"Easy and powerful popover library for Ruby On Rails","archived":false,"fork":false,"pushed_at":"2025-07-12T10:58:30.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-11T18:27:37.573Z","etag":null,"topics":["floating-ui","popover","ruby","ruby-on-rails"],"latest_commit_sha":null,"homepage":"https://coupdoeil.org","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pagehey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-12T10:47:53.000Z","updated_at":"2025-07-12T10:59:31.000Z","dependencies_parsed_at":"2025-07-13T04:18:53.601Z","dependency_job_id":null,"html_url":"https://github.com/Pagehey/coupdoeil","commit_stats":null,"previous_names":["pagehey/coupdoeil"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Pagehey/coupdoeil","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pagehey%2Fcoupdoeil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pagehey%2Fcoupdoeil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pagehey%2Fcoupdoeil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pagehey%2Fcoupdoeil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pagehey","download_url":"https://codeload.github.com/Pagehey/coupdoeil/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pagehey%2Fcoupdoeil/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31955919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["floating-ui","popover","ruby","ruby-on-rails"],"created_at":"2025-11-11T18:21:15.015Z","updated_at":"2026-04-18T04:01:51.199Z","avatar_url":"https://github.com/Pagehey.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Coupdoeil\n[![Gem Version](https://badge.fury.io/rb/coupdoeil.svg?icon=si%3Arubygems\u0026icon_color=%23ff2600)](https://badge.fury.io/rb/coupdoeil)\n\nA framework to easily handle popovers.\n\nThis repository is a placeholder. The original repository is hosted on GitLab: [Coupdoeil repository on GitLab](https://gitlab.com/Pagehey/coupdoeil).\n\n## Documentation\nSee [coupdoeil.org](https://coupdoeil.org) for full documentation.\n\nThere is also an [introduction article I wrote for the first release.](https://dev.to/pagehey/coupdoeil-ruby-gem-174a)\n\n## Overview\n\n### What is a Coupdoeil::Popover?\n\nPopovers are ruby objects used to easily build powerful popups (from basic tooltips to full dialog popovers).\nThey are mostly inspired by GitHub popovers (like hovering on a link to a repo, or a username)\nand Wikipedia popups (when hovering a link to another wikipedia article).\n\nClick to toggle examples\n\u003cdetails\u003e\n    \u003csummary\u003e\u003ci\u003eA quick look on a contact details\u003c/i\u003e\u003c/summary\u003e\n    \u003cimg src=\"https://coupdoeil.org/overview-example.gif\" alt=\"popover example\" /\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n    \u003csummary\u003e\u003ci\u003eA form in a popup\u003c/i\u003e\u003c/summary\u003e\n    \u003cimg src=\"https://coupdoeil.org/overview-example-2.gif\" alt=\"popover example\" /\u003e\n\u003c/details\u003e\n\u003cdetails\u003e\n    \u003csummary\u003e\u003ci\u003eA side menu with sub items\u003c/i\u003e\u003c/summary\u003e\n    \u003cimg src=\"https://coupdoeil.org/overview-example-3.gif\" alt=\"side menu with sub items popover example\" /\u003e\n\u003c/details\u003e\n\n[See more use-cases in documentation](https://coupdoeil.org/case-studies.html)\n\nThe current implementation takes inspiration from both ViewComponent and ActionMailer, to make it as easy as possible to use while offering a wide range of possibilities.\n\n```ruby\n# app/popovers/contact_popover.rb\nclass ContactPopover \u003c Coupdoeil::Popover\n  def details\n    @contact = params[:contact]\n  end\nend\n```\n\n```erb\n\u003c%# app/popovers/contact_popover/details.html.erb %\u003e\n\u003cdiv class=\"contact-details\"\u003e\n  \u003c%= image_tag @contact.avatar %\u003e\n  \u003cstrong\u003e\u003c%= @contact.first_name %\u003e \u003c%= @contact.last_name %\u003e\u003c/strong\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\nWhich is embedded by doing so:\n\n```erb\n\u003c%# app/views/messages/show.html.erb %\u003e\n\u003cdiv\u003e\n    \u003cspan\u003eFrom: \u003c/span\u003e\n    \u003c%= coupdoeil_popover_tag ContactPopover.with(contact: @contact).details do %\u003e\n      \u003cspan class=\"contact-pill\"\u003e\u003c%= @contact.email %\u003e\u003c/span\u003e\n    \u003c% end %\u003e\n\u003c/div\u003e\n```\n\n### Why use Coupdoeil popovers?\n\nThe concept of 'quick look' allowed by popovers can really improve UX by avoiding the need to navigate to another page and back again just to check summary for a resource.\nIt also permits to hiding until use some parts of UI like small forms, or quick actions in a list of elements.\n\nThe most common examples of such popover are on GitHub (when hovering over a link to a repo, user profile, a PR, etc.) or on\nWikipedia (when hovering over a link to another article).\n\nWhile basic popups implementations can be made with simple helpers, data-attributes, and a bit of JavaScript,\nit tends to get too complex over time and often not handle enough edge-cases to be used everywhere it could improve UX.\n\n`Coupdoeil::Popover` offers a way to easily encapsulate and power up popovers rendering logic.\nIt allows a lot of customization possibilities (see [options](https://coupdoeil.org/opts.html)) and promotes re-usability by using an API similar to\nparameterized ActionMailer (see [Why does it look like a mailer?](https://coupdoeil.org/architectural-decisions.html#why-does-it-look-like-a-mailer)).\n\nThis gem also tries to handle all known issues of such popovers, such as\nthe user's mouse quickly leaving and re-entering popover without closing it,\npreventing opening of a popover if mouse did not stop on it, etc.\n\n### Performances\n\nBy default, a popover content is not loaded until it is needed.\nIt means the DOM is not cluttered with 'maybe to be used' HTML, hidden in template tags or data-attributes.\nHowever, params have to be present in HTML so they are sent for rendering the popover (eg: a record id),\nso try passing as few as required to build it later during render.\nAlso, popovers are cached so the fetch happens only the first time a popover is open.\n\nWhen needed, popovers can still be preloaded and included in DOM on initial page load. See [preload option](https://coupdoeil.org/options/loading.html).\n\n## Licence \nCoupdoeil is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpagehey%2Fcoupdoeil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpagehey%2Fcoupdoeil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpagehey%2Fcoupdoeil/lists"}