coupdoeil 1.0.0.pre.beta.1 → 1.0.0.pre.beta.2

data/app/assets/stylesheets/coupdoeil/popover-animation.css

@@ -0,0 +1,44 @@
+.coupdoeil--popover.hidden {
+  display: none;
+}
+
+.coupdoeil--popover[data-animation].popover-enter {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.coupdoeil--popover[data-animation].popover-leave {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.coupdoeil--popover[data-animation].popover-enter, .coupdoeil--popover[data-animation].popover-leave {
+  transition-property: opacity, transform;
+  transition-duration: 150ms;
+}
+.coupdoeil--popover[data-animation].popover-enter-end[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-enter-end[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-enter-end[data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-start[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-leave-start[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-start[data-animation=slide-out] {
+  opacity: 1;
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-enter-start[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-enter-start[data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-leave-end[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-animation=slide-out] {
+  opacity: 0;
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=right][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=right][data-animation=slide-in] {
+  transform: translateX(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=right][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=right][data-animation=slide-out] {
+  transform: translateX(-1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=left][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=left][data-animation=slide-in] {
+  transform: translateX(-1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=left][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=left][data-animation=slide-out] {
+  transform: translateX(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=top][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=top][data-animation=slide-in] {
+  transform: translateY(-1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=top][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=top][data-animation=slide-out] {
+  transform: translateY(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=bottom][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=bottom][data-animation=slide-in] {
+  transform: translateY(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=bottom][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=bottom][data-animation=slide-out] {
+  transform: translateY(-1rem);
+}

data/app/assets/stylesheets/coupdoeil/popover-arrow.css

@@ -0,0 +1,39 @@
+.coupdoeil--popover [data-popover-arrow] {
+  --co-popover--color: white;
+  --co-popover--border-color: rgb(209 213 219);
+  --co-popover-border-size: 1px;
+  --co-popover-border-style: solid;
+  --co-popover--size-ratio: 1;
+  --co-popover--height: 0.75rem;
+  --co-popover--width: calc(var(--co-popover--height) / var(--co-popover--size-ratio));
+  position: absolute;
+  height: var(--co-popover--height);
+  width: var(--co-popover--height);
+}
+.coupdoeil--popover [data-popover-arrow]::after, .coupdoeil--popover [data-popover-arrow]::before {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  bottom: 0;
+  border: var(--co-popover--base-border-width) var(--co-popover-border-style) transparent;
+}
+.coupdoeil--popover [data-popover-arrow]::after {
+  --co-popover--base-border-width: var(--co-popover--width);
+  border-bottom-color: var(--co-popover--color);
+  left: calc(50% - var(--co-popover--width));
+}
+.coupdoeil--popover [data-popover-arrow]::before {
+  --co-popover--base-border-width: calc(var(--co-popover--height) + var(--co-popover-border-size));
+  border-bottom-color: var(--co-popover--border-color);
+  left: calc(50% - var(--co-popover--width) - var(--co-popover-border-size));
+}
+.coupdoeil--popover[data-placement|=top] [data-popover-arrow] {
+  transform: rotate(180deg);
+}
+.coupdoeil--popover[data-placement|=right] [data-popover-arrow] {
+  transform: rotate(-90deg);
+}
+.coupdoeil--popover[data-placement|=left] [data-popover-arrow] {
+  transform: rotate(90deg);
+}

data/app/assets/stylesheets/coupdoeil/popover.css

@@ -0,0 +1,84 @@
+.coupdoeil--popover.hidden {
+  display: none;
+}
+
+.coupdoeil--popover[data-animation].popover-enter {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.coupdoeil--popover[data-animation].popover-leave {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.coupdoeil--popover[data-animation].popover-enter, .coupdoeil--popover[data-animation].popover-leave {
+  transition-property: opacity, transform;
+  transition-duration: 150ms;
+}
+.coupdoeil--popover[data-animation].popover-enter-end[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-enter-end[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-enter-end[data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-start[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-leave-start[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-start[data-animation=slide-out] {
+  opacity: 1;
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-enter-start[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-enter-start[data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-animation=fade-in], .coupdoeil--popover[data-animation].popover-leave-end[data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-animation=slide-out] {
+  opacity: 0;
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=right][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=right][data-animation=slide-in] {
+  transform: translateX(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=right][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=right][data-animation=slide-out] {
+  transform: translateX(-1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=left][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=left][data-animation=slide-in] {
+  transform: translateX(-1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=left][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=left][data-animation=slide-out] {
+  transform: translateX(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=top][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=top][data-animation=slide-in] {
+  transform: translateY(-1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=top][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=top][data-animation=slide-out] {
+  transform: translateY(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=bottom][data-animation=slide-in], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=bottom][data-animation=slide-in] {
+  transform: translateY(1rem);
+}
+.coupdoeil--popover[data-animation].popover-enter-start[data-placement|=bottom][data-animation=slide-out], .coupdoeil--popover[data-animation].popover-leave-end[data-placement|=bottom][data-animation=slide-out] {
+  transform: translateY(-1rem);
+}
+
+.coupdoeil--popover [data-popover-arrow] {
+  --co-popover--color: white;
+  --co-popover--border-color: rgb(209 213 219);
+  --co-popover-border-size: 1px;
+  --co-popover-border-style: solid;
+  --co-popover--size-ratio: 1;
+  --co-popover--height: 0.75rem;
+  --co-popover--width: calc(var(--co-popover--height) / var(--co-popover--size-ratio));
+  position: absolute;
+  height: var(--co-popover--height);
+  width: var(--co-popover--height);
+}
+.coupdoeil--popover [data-popover-arrow]::after, .coupdoeil--popover [data-popover-arrow]::before {
+  content: "";
+  width: 0;
+  height: 0;
+  position: absolute;
+  bottom: 0;
+  border: var(--co-popover--base-border-width) var(--co-popover-border-style) transparent;
+}
+.coupdoeil--popover [data-popover-arrow]::after {
+  --co-popover--base-border-width: var(--co-popover--width);
+  border-bottom-color: var(--co-popover--color);
+  left: calc(50% - var(--co-popover--width));
+}
+.coupdoeil--popover [data-popover-arrow]::before {
+  --co-popover--base-border-width: calc(var(--co-popover--height) + var(--co-popover-border-size));
+  border-bottom-color: var(--co-popover--border-color);
+  left: calc(50% - var(--co-popover--width) - var(--co-popover-border-size));
+}
+.coupdoeil--popover[data-placement|=top] [data-popover-arrow] {
+  transform: rotate(180deg);
+}
+.coupdoeil--popover[data-placement|=right] [data-popover-arrow] {
+  transform: rotate(-90deg);
+}
+.coupdoeil--popover[data-placement|=left] [data-popover-arrow] {
+  transform: rotate(90deg);
+}

data/app/controllers/coupdoeil/{hovercards_controller.rb → popovers_controller.rb}

@@ -1,19 +1,19 @@
 # frozen_string_literal: true
 
 module Coupdoeil
-  class HovercardsController < ApplicationController
+  class PopoversController < ApplicationController
     before_action :set_action_and_resource_name
-    before_action :set_hovercard_class
-    before_action :set_hovercard_params
+    before_action :set_popover_class
+    before_action :set_popover_params
 
-    filters = _process_action_callbacks.map(&:filter) - %i[set_action_and_resource_name set_hovercard_class set_hovercard_params]
+    filters = _process_action_callbacks.map(&:filter) - %i[set_action_and_resource_name set_popover_class set_popover_params]
     skip_before_action(*filters, raise: false)
     skip_after_action(*filters, raise: false)
     skip_around_action(*filters, raise: false)
 
     def create
-      hovercard = @hovercard_klass.new(@hovercard_params, view_context)
-      render plain: hovercard.process(@action_name), layout: false
+      popover = @popover_klass.new(@popover_params, view_context)
+      render plain: popover.process(@action_name), layout: false
     end
 
     private
@@ -23,19 +23,19 @@ module Coupdoeil
     end
 
     if Rails.env.development?
-      def set_hovercard_class
-        @hovercard_klass = Coupdoeil::Hovercard.registry.lookup_or_register(@resource_name)
+      def set_popover_class
+        @popover_klass = Coupdoeil::Popover.registry.lookup_or_register(@resource_name)
       end
     else
-      def set_hovercard_class
-        @hovercard_klass = Coupdoeil::Hovercard.registry.lookup(@resource_name)
+      def set_popover_class
+        @popover_klass = Coupdoeil::Popover.registry.lookup(@resource_name)
       end
     end
 
-    def set_hovercard_params
-      @hovercard_params =
+    def set_popover_params
+      @popover_params =
         if params[:params].blank?
-          @hovercard_params = {}.freeze
+          @popover_params = {}.freeze
         else
           raw_params = JSON.parse(params[:params])
           card_params = Coupdoeil::Params.deserialize(raw_params).sole

data/app/helpers/coupdoeil/application_helper.rb

@@ -2,15 +2,15 @@
 
 module Coupdoeil
   module ApplicationHelper
-    def coupdoeil_hovercard_tag(hovercard, options = nil, **attributes_or_options, &)
+    def coupdoeil_popover_tag(popover, options = nil, **attributes_or_options, &)
       if options.present?
         attributes = attributes_or_options
       else
-        options = attributes_or_options.extract!(*Hovercard::OptionsSet::OPTION_NAMES)
+        options = attributes_or_options.extract!(*Popover::OptionsSet::OPTION_NAMES)
         attributes = attributes_or_options
       end
-      hovercard_options = options
-      render(Coupdoeil::Tag.new(hovercard:, hovercard_options:, attributes:), &)
+      popover_options = options
+      render(Coupdoeil::Tag.new(popover:, popover_options:, attributes:), &)
     end
   end
 end

data/app/javascript/coupdoeil/elements/coupdoeil_element.js

@@ -1,8 +1,8 @@
-import {HovercardController} from '../hovercard/controller'
-import {openHovercard} from '../hovercard/opening'
-import {HOVERCARD_SELECTOR} from "../hovercard/config";
-import {closeNow} from "../hovercard/closing";
-import {addToCurrents} from "../hovercard/current";
+import {PopoverController} from '../popover/controller'
+import {openPopover} from '../popover/opening'
+import {POPOVER_SELECTOR} from "../popover/config";
+import {closeNow} from "../popover/closing";
+import {addToCurrents} from "../popover/current";
 
 function generateUniqueId() {
   const array = new Uint32Array(1)
@@ -14,21 +14,21 @@ export default class extends HTMLElement {
   constructor() {
     super()
     this.uniqueId = generateUniqueId()
-    this.hovercardController = new HovercardController(this)
+    this.popoverController = new PopoverController(this)
   }
 
-  openHovercard(triggerElement = null, callbacks) {
-    if (this.openingHovercard || this.hovercardController.isOpen || this.disabled || triggerElement === this) return;
+  openPopover(triggerElement = null, callbacks) {
+    if (this.openingPopover || this.popoverController.isOpen || this.disabled || triggerElement === this) return;
 
-    this.openingHovercard = true
+    this.openingPopover = true
 
-    const parent = this.closest(HOVERCARD_SELECTOR)?.controller
+    const parent = this.closest(POPOVER_SELECTOR)?.controller
     addToCurrents(this)
-    return openHovercard(this.hovercardController, { parent, ...callbacks })
+    return openPopover(this.popoverController, { parent, ...callbacks })
   }
 
-  closeHovercard() {
-    closeNow(this.hovercardController)
+  closePopover() {
+    closeNow(this.popoverController)
   }
 
   get disabled() {

data/app/javascript/coupdoeil/events/onclick.js

@@ -1,67 +1,67 @@
-import {HOVERCARD_SELECTOR} from "../hovercard/config";
-import {isElementCloseHovercardButton} from "../hovercard/state_check";
-import {noTriggeredOnClick} from "../hovercard/attributes";
-import {closeAllNow, closeChildrenNow, closeNow} from "../hovercard/closing";
+import {POPOVER_SELECTOR} from "../popover/config";
+import {isElementClosePopoverButton} from "../popover/state_check";
+import {noTriggeredOnClick} from "../popover/attributes";
+import {closeAllNow, closeChildrenNow, closeNow} from "../popover/closing";
 
 export const coupdoeilOnClickEvent = ({ target: clickedElement }) => {
   const coupdoeilElement = clickedElement.closest('coup-doeil')
-  const hovercardElement = clickedElement.closest(HOVERCARD_SELECTOR)
+  const popoverElement = clickedElement.closest(POPOVER_SELECTOR)
 
-  if (coupdoeilElement && hovercardElement) {
-    handleClickedCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, clickedElement)
+  if (coupdoeilElement && popoverElement) {
+    handleClickedCoupdoeilWithinPopover(coupdoeilElement, popoverElement, clickedElement)
   }
   else if (coupdoeilElement) {
-    handleClickedCoupdoeilOutsideHovercard(coupdoeilElement, clickedElement)
+    handleClickedCoupdoeilOutsidePopover(coupdoeilElement, clickedElement)
   }
-  else if (hovercardElement) {
-    handleClickOutsideCoupdoeilButWithinHovercard(hovercardElement, clickedElement)
+  else if (popoverElement) {
+    handleClickOutsideCoupdoeilButWithinPopover(popoverElement, clickedElement)
   }
   else {
-    handleClickOutsideCoupdoeilAndHovercard()
+    handleClickOutsideCoupdoeilAndPopover()
   }
 }
 
-function handleClickedCoupdoeilWithinHovercard(coupdoeilElement, _hovercardElement, clickedElement) {
-  const hovercard = coupdoeilElement.hovercardController
-  if(noTriggeredOnClick(hovercard))
+function handleClickedCoupdoeilWithinPopover(coupdoeilElement, _popoverElement, clickedElement) {
+  const popover = coupdoeilElement.popoverController
+  if(noTriggeredOnClick(popover))
     return;
 
-  if (hovercard.isOpen) {
-    // second click on an open hovercard trigger closes it
-    closeNow(hovercard)
+  if (popover.isOpen) {
+    // second click on an open popover trigger closes it
+    closeNow(popover)
   } else {
-    // first click on a closed hovercard trigger opens it
-    // If any other hovercard is open, it is the parent hovercard, hence it should not be closed.
-    coupdoeilElement.openHovercard(clickedElement)
+    // first click on a closed popover trigger opens it
+    // If any other popover is open, it is the parent popover, hence it should not be closed.
+    coupdoeilElement.openPopover(clickedElement)
   }
 }
 
-function handleClickedCoupdoeilOutsideHovercard(coupdoeilElement, clickedElement) {
-  const hovercard = coupdoeilElement.hovercardController
-  if(noTriggeredOnClick(hovercard))
+function handleClickedCoupdoeilOutsidePopover(coupdoeilElement, clickedElement) {
+  const popover = coupdoeilElement.popoverController
+  if(noTriggeredOnClick(popover))
     return;
 
-  if (hovercard.isOpen) {
-    // second click on an open hovercard trigger closes it
-    closeNow(hovercard)
+  if (popover.isOpen) {
+    // second click on an open popover trigger closes it
+    closeNow(popover)
   } else {
-    // close any other open hovercard
+    // close any other open popover
     closeAllNow()
-    // first click on a closed hovercard trigger opens it
-    coupdoeilElement.openHovercard(clickedElement)
+    // first click on a closed popover trigger opens it
+    coupdoeilElement.openPopover(clickedElement)
   }
 }
 
-function handleClickOutsideCoupdoeilButWithinHovercard(hovercardElement, clickedElement) {
-  const hovercard = hovercardElement.controller;
+function handleClickOutsideCoupdoeilButWithinPopover(popoverElement, clickedElement) {
+  const popover = popoverElement.controller;
 
-  if (isElementCloseHovercardButton(clickedElement)) {
-    closeNow(hovercard)
-  } else if (hovercard.children.size > 0) {
-    closeChildrenNow(hovercard)
+  if (isElementClosePopoverButton(clickedElement)) {
+    closeNow(popover)
+  } else if (popover.children.size > 0) {
+    closeChildrenNow(popover)
   }
 }
 
-function handleClickOutsideCoupdoeilAndHovercard() {
+function handleClickOutsideCoupdoeilAndPopover() {
   closeAllNow()
 }

data/app/javascript/coupdoeil/events/onmouseover.js

@@ -1,89 +1,89 @@
-import {HOVERCARD_SELECTOR} from "../hovercard/config";
-import {isAnyHovercardOpened} from "../hovercard/state_check";
-import {notTriggeredOnHover} from "../hovercard/attributes";
+import {POPOVER_SELECTOR} from "../popover/config";
+import {isAnyPopoverOpened} from "../popover/state_check";
+import {notTriggeredOnHover} from "../popover/attributes";
 import {
   cancelCloseRequest,
   closeChildrenNow,
   closeOnHoverChildrenLater,
   closeTriggeredOnHoverLater,
   closeTriggeredOnHoverNowUnlessAncestor
-} from "../hovercard/closing";
-import {addToCurrents as addToCurrentHovercards} from "../hovercard/current";
+} from "../popover/closing";
+import {addToCurrents as addToCurrentPopovers} from "../popover/current";
 
 export const onMouseOver = ({ target: hoveredElement }) => {
   const coupdoeilElement = hoveredElement.closest('coup-doeil')
-  const hovercardElement = hoveredElement.closest(HOVERCARD_SELECTOR)
+  const popoverElement = hoveredElement.closest(POPOVER_SELECTOR)
 
-  if (coupdoeilElement && hovercardElement) {
-    handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, hoveredElement)
+  if (coupdoeilElement && popoverElement) {
+    handleMouseOverCoupdoeilWithinPopover(coupdoeilElement, popoverElement, hoveredElement)
   }
   else if (coupdoeilElement) {
-    handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement, hoveredElement)
+    handleMouseOverCoupdoeilOutsidePopover(coupdoeilElement, hoveredElement)
   }
-  else if (hovercardElement) {
-    handleOverOutsideCoupdoeilButWithinHovercard(hovercardElement)
+  else if (popoverElement) {
+    handleOverOutsideCoupdoeilButWithinPopover(popoverElement)
   }
   else {
-    handleOverOutsideCoupdoeilAndHovercard()
+    handleOverOutsideCoupdoeilAndPopover()
   }
 }
 
-function handleMouseOverCoupdoeilWithinHovercard(coupdoeilElement, hovercardElement, hoveredElement) {
-  const childHovercard = coupdoeilElement.hovercardController
-  const parentHovercard = hovercardElement.controller
-  if(notTriggeredOnHover(childHovercard))
+function handleMouseOverCoupdoeilWithinPopover(coupdoeilElement, popoverElement, hoveredElement) {
+  const childPopover = coupdoeilElement.popoverController
+  const parentPopover = popoverElement.controller
+  if(notTriggeredOnHover(childPopover))
     return;
 
-  if (childHovercard.isOpen) {
-    // when the mouse goes back from child hovercard to its coupdoeil element within parent hovercard
-    // it means that this child hovercard was already open
-    closeChildrenNow(childHovercard)
+  if (childPopover.isOpen) {
+    // when the mouse goes back from child popover to its coupdoeil element within parent popover
+    // it means that this child popover was already open
+    closeChildrenNow(childPopover)
   } else {
-    // ensures to close other children hovercards before opening the one that current one
-    closeChildrenNow(parentHovercard)
-    // should also close any open hovercard outside of parent
-    coupdoeilElement.openHovercard(hoveredElement)
+    // ensures to close other children popovers before opening the one that current one
+    closeChildrenNow(parentPopover)
+    // should also close any open popover outside of parent
+    coupdoeilElement.openPopover(hoveredElement)
   }
 }
 
-function handleMouseOverCoupdoeilOutsideHovercard(coupdoeilElement, hoveredElement) {
-  const hovercard = coupdoeilElement.hovercardController
-  if(notTriggeredOnHover(hovercard))
+function handleMouseOverCoupdoeilOutsidePopover(coupdoeilElement, hoveredElement) {
+  const popover = coupdoeilElement.popoverController
+  if(notTriggeredOnHover(popover))
     return;
 
-  if (hovercard.isClosed) {
-    // Close any other open hovercard before opening this one
-    coupdoeilElement.openHovercard(hoveredElement, { beforeDisplay: closeTriggeredOnHoverNowUnlessAncestor })
-  } else if (hovercard.closingRequest) {
-    // hovercard is still open but was requested to close, then it clear this closing request
-    // and ensures the hovercards stays in current hovercards register
-    cancelCloseRequest(hovercard)
-    addToCurrentHovercards(coupdoeilElement)
+  if (popover.isClosed) {
+    // Close any other open popover before opening this one
+    coupdoeilElement.openPopover(hoveredElement, { beforeDisplay: closeTriggeredOnHoverNowUnlessAncestor })
+  } else if (popover.closingRequest) {
+    // popover is still open but was requested to close, then it clear this closing request
+    // and ensures the popovers stays in current popovers register
+    cancelCloseRequest(popover)
+    addToCurrentPopovers(coupdoeilElement)
   }
 }
 
-function handleOverOutsideCoupdoeilAndHovercard() {
-  // mouse is not within any hovercard and not over any coupdoeil element
-  // Therefore all hovercards that trigger on hover should be closed if any is open.
-  if (isAnyHovercardOpened()) {
+function handleOverOutsideCoupdoeilAndPopover() {
+  // mouse is not within any popover and not over any coupdoeil element
+  // Therefore all popovers that trigger on hover should be closed if any is open.
+  if (isAnyPopoverOpened()) {
     closeTriggeredOnHoverLater()
   }
 }
 
-function handleOverOutsideCoupdoeilButWithinHovercard(hovercardElement) {
-  const hovercard = hovercardElement.controller
+function handleOverOutsideCoupdoeilButWithinPopover(popoverElement) {
+  const popover = popoverElement.controller
 
-  if (hovercard.closingRequest) {
-    // hovercard is still open but was requested to close, then it clears this closing request
-    // and ensures the hovercards stays in current hovercards register
-    // This typically happens when mouse was on coupdoeil element, then it moves toward the hovercard
-    // but because of a small gap, it triggers the closing request, but when the mouse finally enters the hovercard
+  if (popover.closingRequest) {
+    // popover is still open but was requested to close, then it clears this closing request
+    // and ensures the popovers stays in current popovers register
+    // This typically happens when mouse was on coupdoeil element, then it moves toward the popover
+    // but because of a small gap, it triggers the closing request, but when the mouse finally enters the popover
     // this closing request must be aborted.
-    cancelCloseRequest(hovercard)
-    addToCurrentHovercards(hovercard.coupdoeilElement)
-  } else if (hovercard.children.size > 0) {
-    // Happens when a child hovercard was open but mouse moved outside of it or its coupdoeil element,
-    // but stays within the parent hovercard
-    closeOnHoverChildrenLater(hovercard)
+    cancelCloseRequest(popover)
+    addToCurrentPopovers(popover.coupdoeilElement)
+  } else if (popover.children.size > 0) {
+    // Happens when a child popover was open but mouse moved outside of it or its coupdoeil element,
+    // but stays within the parent popover
+    closeOnHoverChildrenLater(popover)
   }
 }

data/app/javascript/coupdoeil/events.js

@@ -1,11 +1,11 @@
 import {coupdoeilOnClickEvent} from "./events/onclick";
 import {onMouseOver} from "./events/onmouseover";
 
-import {clearHovercardContentCache} from "./hovercard/cache";
-import {clearAll} from "./hovercard/closing";
+import {clearPopoverContentCache} from "./popover/cache";
+import {clearAll} from "./popover/closing";
 
 document.addEventListener("DOMContentLoaded", () => {
-  clearHovercardContentCache()
+  clearPopoverContentCache()
   document.addEventListener("click", coupdoeilOnClickEvent)
   document.documentElement.addEventListener("mouseover", onMouseOver, { passive: true })
 
@@ -15,7 +15,7 @@ document.addEventListener("DOMContentLoaded", () => {
     })
     document.addEventListener('turbo:load', (_event) => {
       clearAll()
-      clearHovercardContentCache()
+      clearPopoverContentCache()
     })
   }
 })

data/app/javascript/coupdoeil/index.js

@@ -1 +1 @@
-import './hovercard'
+import './popover'

data/app/javascript/coupdoeil/{hovercard → popover}/attributes.js

@@ -1,11 +1,11 @@
 import {extractOptionFromElement} from "./optionsParser";
 
 export function getType(controller) {
-  return controller.coupdoeilElement.getAttribute('hc-type')
+  return controller.coupdoeilElement.getAttribute('popover-type')
 }
 
 export function getParams(controller) {
-  return controller.coupdoeilElement.getAttribute('hc-params')
+  return controller.coupdoeilElement.getAttribute('popover-params')
 }
 
 export function getTrigger(controller) {
@@ -29,5 +29,5 @@ export function notTriggeredOnHover(controller) {
 }
 
 export function preloadedContentElement(controller) {
-  return controller.coupdoeilElement.querySelector('.hovercard-content')
+  return controller.coupdoeilElement.querySelector('.popover-content')
 }

data/app/javascript/coupdoeil/popover/cache.js

@@ -0,0 +1,22 @@
+import {getParams, getType, preloadedContentElement} from './attributes'
+
+export const popoverContentHTMLMap = new Map()
+
+function cacheMapKey(controller) {
+  if (preloadedContentElement(controller)) {
+    return controller.coupdoeilElement.uniqueId
+  }
+  return getType(controller) + getParams(controller)
+}
+
+export function getPopoverContentHTML(controller) {
+  return popoverContentHTMLMap.get(cacheMapKey(controller))
+}
+
+export function setPopoverContentHTML(controller, value) {
+  popoverContentHTMLMap.set(cacheMapKey(controller), value)
+}
+
+export function clearPopoverContentCache() {
+  popoverContentHTMLMap.clear()
+}