From 1e35f83fedfcdbb311b8e861943d577a836ab772 Mon Sep 17 00:00:00 2001
From: Kode <kodestar@gmail.com>
Date: Tue, 15 Mar 2022 19:08:10 +0000
Subject: [PATCH] Changes to the tooltips

---
 public/css/app.css              | 15 ++++++++++-----
 public/js/app.js                |  5 +++++
 public/mix-manifest.json        |  4 ++--
 resources/assets/js/app.js      |  6 ++++++
 resources/assets/sass/_app.scss | 17 +++++++++++------
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 6eca8014..6878a77e 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 html {
   font-family: sans-serif;
@@ -420,11 +419,12 @@ body {
   text-align: center;
   line-height: 30px;
   display: none;
+  z-index: 1;
 }
 .item-container .tooltip {
   padding: 25px;
   border-radius: 5px;
-  background: #00000038;
+  background: #000000c8;
   color: white;
   position: absolute;
   bottom: 120px;
@@ -433,10 +433,15 @@ body {
   font-size: 13px;
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
-  display: none;
+  z-index: 0;
+  opacity: 0;
+  transform: translateY(-20px);
+  transition: all 0.3s;
 }
-.item-container:hover .tooltip {
-  display: block;
+.item-container .tooltip.active {
+  transform: translateY(0);
+  opacity: 1;
+  z-index: 2;
 }
 
 .black {
diff --git a/public/js/app.js b/public/js/app.js
index 33042837..af1c32f9 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -641,6 +641,11 @@ $.when($.ready).then(function () {
     }
   });
   $('#sortable').sortable('disable');
+  $('#sortable').on('mouseenter', '.item', function () {
+    $(this).siblings('.tooltip').addClass('active');
+  }).on('mouseleave', '.item', function () {
+    $(this).siblings('.tooltip').removeClass('active');
+  });
   $('#search-container').on('input', 'input[name=q]', function () {
     var search = this.value;
     var items = $('#sortable').children('.item-container');
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 80afbe53..e1f6278a 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=7de7134287f332b33a25",
-    "/js/app.js": "/js/app.js?id=d04c0e0d819506e10194"
+    "/css/app.css": "/css/app.css?id=af5899107a5ec84f0b3a",
+    "/js/app.js": "/js/app.js?id=39f89cbf3b7659f70528"
 }
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 683309ba..e675b427 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -128,6 +128,12 @@ $.when( $.ready ).then(function() {
     });
     $('#sortable').sortable('disable');
 
+    $('#sortable').on('mouseenter', '.item', function () {
+        $(this).siblings('.tooltip').addClass('active')
+    }).on('mouseleave', '.item', function () {
+        $(this).siblings('.tooltip').removeClass('active')
+    })
+
     $('#search-container').on('input', 'input[name=q]', function () {
         const search = this.value
         const items = $('#sortable').children('.item-container')
diff --git a/resources/assets/sass/_app.scss b/resources/assets/sass/_app.scss
index 2bb21a94..d22ac499 100644
--- a/resources/assets/sass/_app.scss
+++ b/resources/assets/sass/_app.scss
@@ -200,11 +200,13 @@ body {
 		text-align: center;
 		line-height: 30px;
 		display: none;
+		z-index: 1;
 	}
+
 	.tooltip {
 		padding: 25px;
 		border-radius: 5px;
-		background: #00000038;
+		background: #000000c8;
 		color: white;
 		position: absolute;
 		bottom: 120px;
@@ -212,11 +214,14 @@ body {
 		right: 0;
 		font-size: 13px;
 		backdrop-filter: blur(8px);
-		display: none;
-	}
-	&:hover {
-		.tooltip {
-			display: block;
+		z-index: 0;
+		opacity: 0;
+		transform: translateY(-20px);
+		transition: all 0.3s;
+		&.active {
+			transform: translateY(0);
+			opacity: 1;
+			z-index: 2;
 		}
 	}
 }