00_html.erb

<div
  class="inline-block"
  data-controller="hovercard"
  data-hovercard-url-value="<%= hovercard_user_path(e.user) %>"
  data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
>
  <%= link_to e.user.username, e.user, class: "font-bold hover:text-gray-700" %>
</div>
<span>
  <%= e.action %>
</span>
<div
  class="inline-block"
  data-controller="hovercard"
  data-hovercard-url-value="<%= hovercard_shoe_path(e.item) %>"
  data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
>
  <%= link_to e.item.name, e.item, class: "font-extrabold border-b-2 border-purple-400 text-purple-400 hover:text-purple-600 hover:border-purple-600" %>
</div>

hovercard_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static values = {
    url: String,
  };

  static targets = ["card"];

  show() {
    if (this.hasCardTarget) {
      this.cardTarget.classList.remove("hidden");
    } else {
      fetch(this.urlValue)
        .then((r) => r.text())
        .then((html) => {
          const fragment = document
            .createRange()
            .createContextualFragment(html);

          this.element.appendChild(fragment);
        });
    }
  }

  hide() {
    if (this.hasCardTarget) {
      this.cardTarget.classList.add("hidden");
    }
  }

  disconnect() {
    if (this.hasCardTarget) {
      this.cardTarget.remove();
    }
  }
}