Chore: Replace hint.css with a stimulus js tippy.js wrapper. (#4723)

Because:
- It gives us more control over tool tips
- It means we won't need to load in a second stylesheet generated by the
JS bundler

This commit:
- Removes hint.css
- Adds tippy.js
- Adds a Stimulus JS tooltip controller

app/components/project_submissions/like_component.html.erb

@@ -1,9 +1,20 @@
 <%= turbo_frame_tag dom_id(project_submission, :likes) do %>
-  <%= button_to project_submission_like_path(project_submission), method: :put, disabled: current_users_submission, class: "mr-4 flex items-center #{'hint--top' unless current_users_submission}", data: { test_id: 'like-submission' }, aria: { label: tooltip_text } do %>
+  <%= button_to(
+        project_submission_like_path(project_submission),
+        method: :put,
+        disabled: current_users_submission,
+        class: 'mr-4 flex items-center',
+        data: {
+          controller: 'tooltip',
+          tooltip_message_value: tooltip_text,
+          test_id: 'like-submission'
+        },
+        aria: { label: tooltip_text }
+      ) do %>
     <span class="mr-1 text-sm text-gray-500 dark:text-gray-300" data-project-submissions--item-target="likeCount" data-test-id="like-count">
       <%= project_submission.likes_count %>
     </span>
 
-    <%= inline_svg_tag 'icons/heart.svg', class: "h-5 w-5 #{bg_color_class}", aria: true, title: 'heart', desc: 'heart icon' %>
+    <%= inline_svg_tag 'icons/heart.svg', class: "h-5 w-5 #{bg_color_class}", aria: true, desc: 'heart icon' %>
   <% end %>
 <% end %>

app/components/project_submissions/like_component.rb

@@ -16,7 +16,7 @@ def bg_color_class
     end
 
     def tooltip_text
-      return 'Unlike solution' if current_users_submission || project_submission.liked?
+      return 'Unlike solution' if project_submission.liked?
 
       'Like solution'
     end

app/javascript/application.js

@@ -16,7 +16,6 @@
 
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
-import 'hint.css/hint.min.css';
 import 'controllers';
 import '@hotwired/turbo-rails';
 import './src/custom_turbo_stream_actions';

app/javascript/controllers/tooltip_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus';
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
+export default class TooltipController extends Controller {
+  static values = { message: String };
+
+  connect() {
+    this.tippyInstance = tippy(this.element, {
+      content: this.messageValue,
+    });
+  }
+
+  destroy() {
+    this.tippyInstance.destroy();
+  }
+}

package.json

@@ -34,7 +34,6 @@
     "debounce": "^1.2.1",
     "el-transition": "^0.0.7",
     "flatpickr": "^4.6.13",
-    "hint.css": "^3.0.0",
     "js-base64": "^3.7.5",
     "mermaid": "^9.4.3",
     "mini-css-extract-plugin": "^2.9.0",
@@ -53,6 +52,7 @@
     "style-loader": "^3.3.4",
     "tailwindcss": "^3.4.1",
     "terser-webpack-plugin": "5",
+    "tippy.js": "^6.3.7",
     "webpack": "5",
     "webpack-assets-manifest": "5",
     "webpack-cli": "5",