down_vote_link.html.erb

<div data-controller="popper">
  <%= button_tag type: "button", data: { "popper-target": "element", action: "click->popper#show click@window->popper#hide" } do %>
    <%= content_tag "div", id: "downvote-#{video.id}" do %>
      <%= link_to downvote_video_path(video), method: :patch,
                                          remote: true,
                                          style: "display: flex; justify-content: center; align-items: center;" do %>
        <% if current_user %>
          <% if current_user.voted_down_on? video %>
            <%= fa_icon "thumbs-down solid", text: "Dislike",
                                        style: "font-size: 30px; margin: 0 10px;" %>
          <% else %>
            <%= fa_icon "thumbs-down regular", text: "Dislike",
                                          style: "font-size: 30px; margin: 0 10px;" %>
          <% end %>
        <% else %>
          <%= fa_icon "thumbs-down solid", text: "Dislike",
                                        style: "font-size: 30px; margin: 0 10px;" %>
        <% end %>
      <% 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, { class:'navbar-link', "data-turbo-frame": "_top" } %>
    <div id="arrow" data-popper-arrow></div>
  </div>
</div>

popper_controller.js

import { Controller } from "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() {
    // Create a new Popper instance
    this.popperInstance = createPopper(this.elementTarget, this.tooltipTarget, {
      placement: this.placementValue,
      modifiers: [
        {
          name: "offset",
          options: {
            offset: this.offsetValue,
          },
        },
      ],
    });
  }

  show(event) {
    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");
  }

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