_vote.html.erb

<%= turbo_frame_tag "#{dom_id(@video)}_vote" do %>
  <div class="like-buttons" style="display: flex; align-items: center;">
    <%= render partial: "videos/show/upvote_link" %>
    <%= render partial: "videos/show/like_count" %>
    <%= render partial: "videos/show/downvote_link" %>
  </div>
<% end %>

downvote_link.html.erb

<div
<% unless user_signed_in? %>
 data-controller="popper"
<% end %>
>
  <%= content_tag "div", id: "downvote-#{@video.id}",
                          data: { "popper-target": "element",
                          action: "click->popper#show click@window->popper#hide" } do %>
    <%= button_to downvote_video_path(@video), method: :patch,
                                              style: "display: flex; justify-content: center; align-items: center; border: none; background: none;" do %>
      <% if user_signed_in? %>
        <% if current_user.voted_down_on? @video %>
          <%= fa_icon "thumbs-down solid", text: "Dislike",
                                        style: "font-size: 30px; margin: 0 10px; border: none; background: none;" %>
        <% else %>
          <%= fa_icon "thumbs-down regular", text: "Dislike",
                                          style: "font-size: 30px; margin: 0 10px; border: none; background: none;" %>
        <% end %>
      <% else %>
        <%= fa_icon "thumbs-down regular", text: "Dislike",
                                        style: "font-size: 30px; margin: 0 10px; border: none; background: none;" %>
      <% end %>
    <% end %>
  <% end %>
  <div id="tooltip" role="tooltip" data-popper-target="tooltip">
    Dislike this video? <br>
    Sign in to make your opinion count. <br>
    <br>
    <%= link_to "Login", new_user_session_path, { "data-turbo-frame": "_top" } %>
    <div id="arrow" data-popper-arrow></div>
  </div>
</div>

popper_controller.js

import { Controller } from "@hotwired/stimulus";
import { createPopper } from "@popperjs/core";

export default class extends Controller {
  static targets = ["element", "tooltip"];
  static values = {
    placement: String,
    offset: Array,
  };

  initialize() {
    this.placementValue = "top";
    this.offsetValue = [0, 8];
  }

  connect() {
    console.log("connected");
    // Create a new Popper instance
    this.popperInstance = createPopper(this.elementTarget, this.tooltipTarget, {
      placement: this.placementValue,
      modifiers: [
        {
          name: "offset",
          options: {
            offset: this.offsetValue,
          },
        },
      ],
    });
  }

  show(event) {
    console.log("fired");
    event.preventDefault();
    this.hideAllElements();
    this.tooltipTarget.setAttribute("data-show", "");
    // We need to tell Popper to update the tooltip position
    // after we show the tooltip, otherwise it will be incorrect
    this.popperInstance.update();
  }

  hide(event) {
    this.tooltipTarget.removeAttribute("data-show");
  }

  hideAllElements() {
    document
      .querySelectorAll("#tooltip")
      .forEach((element) => element.removeAttribute("data-show"));
  }

  // Destroy the Popper instance
  disconnect() {
    if (this.popperInstance) {
      this.popperInstance.destroy();
    }
  }
}

upvote_link.html.erb

<div
<% unless user_signed_in? %>
  data-controller="popper"
<% end %>
>
  <%= content_tag "div", id: "upvote-#{@video.id}",
                        data: { "popper-target": "element",
                        action: "click->popper#show click@window->popper#hide" } do %>
    <%= button_to upvote_video_path(@video), method: :patch,
                                            style: "display: flex; justify-content: center; align-items: center; border: none; background: none;" do %>
      <% if user_signed_in? %>
        <% if current_user.voted_up_on? @video %>
          <%= fa_icon "thumbs-up solid", style: "font-size: 30px; margin: 0 10px; border: none; background: none;" %>
        <% else %>
          <%= fa_icon "thumbs-up regular", style: "font-size: 30px; margin: 0 10px; border: none; background: none;" %>
        <% end %>
      <% else %>
        <%= fa_icon "thumbs-up regular", style: "font-size: 30px; margin: 0 10px; border: none; background: none;" %>
      <% end %>
    <% end %>
  <% end %>
  <div id="tooltip" role="tooltip" data-popper-target="tooltip">
    Like this video? <br>
    Sign in to make your opinion count. <br>
    <br>
    <%= link_to "Login", new_user_session_path, { "data-turbo-frame": "_top" } %>
    <div id="arrow" data-popper-arrow></div>
  </div>
</div>