refactor: setup tooltipster plugin

_dev/js/theme.js

@@ -26,6 +26,9 @@
 // import 'bootstrap/dist/js/bootstrap.min';
 import "jquery-modal";
 import "jquery-offcanvas/dist/jquery.offcanvas.min.css";
+import "tooltipster";
+import "tooltipster/dist/css/tooltipster.bundle.min.css";
+import "tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css";
 import touchspin from "bootstrap-touchspin";
 import "jquery-touchswipe";
 import "./selectors";
@@ -61,8 +64,8 @@ for (const i in EventEmitter.prototype) {
   prestashop[i] = EventEmitter.prototype[i];
 }
 
-$(function () {
-  const dropDownEl = $(".js-dropdown");
+$(() => {
+  const dropDownEl = $('.js-dropdown');
   const form = new Form();
   const topMenuEl = $('.js-top-menu ul[data-depth="0"]');
   const dropDown = new DropDown(dropDownEl);
@@ -74,43 +77,43 @@ $(function () {
   topMenu.init();
   productMinitature.init();
   productSelect.init();
-  usePasswordPolicy(".field-password-policy");
+  usePasswordPolicy('.field-password-policy');
 
   $('.carousel[data-touch="true"]').swipe({
     swipe(event, direction) {
-      if (direction === "left") {
-        $(this).carousel("next");
+      if (direction === 'left') {
+        $(this).carousel('next');
       }
-      if (direction === "right") {
-        $(this).carousel("prev");
+      if (direction === 'right') {
+        $(this).carousel('prev');
       }
     },
-    allowPageScroll: "vertical",
+    allowPageScroll: 'vertical',
   });
 
-  $("#product-list-top-filters").offcanvas({
+  $('#product-list-top-filters').offcanvas({
     duration: 100,
-    effect: "slide-in-over",
+    effect: 'slide-in-over',
     overlay: true,
     classes: {
-      element: "absolute top-0 z-50",
+      element: 'absolute top-0 z-50',
     },
   });
 
-  $("#show-filters").on("click.offcanvas", function () {
-    $("#product-list-top-filters").offcanvas("show");
+  $('#show-filters').on('click.offcanvas', () => {
+    $('#product-list-top-filters').offcanvas('show');
   });
 
-  $("#hide-filters").on("click.offcanvas", function () {
-    $("#product-list-top-filters").offcanvas("hide");
+  $('#hide-filters').on('click.offcanvas', () => {
+    $('#product-list-top-filters').offcanvas('hide');
   });
 
-  $("#product-list-top-filters").on("shown.offcanvas", function () {
-    $("#product-list-top-filters").show();
+  $('#product-list-top-filters').on('shown.offcanvas', () => {
+    $('#product-list-top-filters').show();
   });
 
-  $("#product-list-top-filters").on("hide.offcanvas", function () {
-    $("#product-list-top-filters").hide();
+  $('#product-list-top-filters').on('hide.offcanvas', () => {
+    $('#product-list-top-filters').hide();
   });
 
   function ThAccordion() {}
@@ -119,17 +122,17 @@ $(function () {
     init() {},
   });
 
-  $.fn["thaccordion"] = function () {
-    var selectors = {
-      root: ".th-accordion",
-      item: ".th-accordion-item",
-      trigger: ".th-accordion-item-trigger",
-      svg: ".th-accordion-item-trigger-svg",
-      content: ".th-accordion-item-content",
+  $.fn.thaccordion = function () {
+    const selectors = {
+      root: '.th-accordion',
+      item: '.th-accordion-item',
+      trigger: '.th-accordion-item-trigger',
+      svg: '.th-accordion-item-trigger-svg',
+      content: '.th-accordion-item-content',
     };
     let selection = null;
-    let items = this.find(selectors.item);
-    let rotateClass = "rotate-90 duration-500";
+    const items = this.find(selectors.item);
+    const rotateClass = 'rotate-90 duration-500';
 
     function collapseAll() {
       items.each(function () {
@@ -139,7 +142,7 @@ $(function () {
     }
     function close() {
       $(selection).find(selectors.content).hide(500);
-      $(selection).find(selectors.svg).removeClass("rotate-90");
+      $(selection).find(selectors.svg).removeClass('rotate-90');
     }
 
     function open() {
@@ -149,16 +152,16 @@ $(function () {
     }
 
     function isOpen(item) {
-      return $(item).find(selectors.content).is(":visible");
+      return $(item).find(selectors.content).is(':visible');
     }
 
     collapseAll();
 
     items.each(function () {
-      var self = this;
+      const self = this;
       $(this)
         .find(selectors.trigger)
-        .on("click", function () {
+        .on('click', () => {
           if (selection === self) {
             if (isOpen(selection)) {
               close();
@@ -175,9 +178,12 @@ $(function () {
     });
   };
 
-  $(".th-accordion").thaccordion();
+  $('.th-accordion').thaccordion();
+  $('.tooltip').tooltipster({
+    theme: 'tooltipster-shadow',
+  });
 
-  $(".toggle-main-menu").on("click", function () {
-    $(".mobile-main-menu").toggle();
+  $('.toggle-main-menu').on('click', () => {
+    $('.mobile-main-menu').toggle();
   });
 });

assets/css/theme.css

@@ -877,11 +877,6 @@ select {
   margin-bottom: 2rem;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1403,10 +1398,6 @@ select {
   padding: 2rem;
 }
 
-.p-1 {
-  padding: 0.25rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1472,6 +1463,10 @@ select {
   padding-right: 0px;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
 .pr-4 {
   padding-right: 1rem;
 }
@@ -1496,14 +1491,6 @@ select {
   padding-top: 1.5rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
-}
-
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1637,10 +1624,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.underline {
-  text-decoration-line: underline;
-}
-
 .line-through {
   text-decoration-line: line-through;
 }
@@ -1714,87 +1697,13 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   display: none;
 }
 
-.even\:bg-gray-200:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.even\:bg-gray-100:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.even\:bg-gray-200\/70:nth-child(even) {
-  background-color: rgb(229 231 235 / 0.7);
-}
-
-.even\:bg-blue-200\/70:nth-child(even) {
-  background-color: rgb(191 219 254 / 0.7);
-}
-
-.even\:bg-blue-100:nth-child(even) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
-.even\:bg-blue-100\/20:nth-child(even) {
-  background-color: rgb(219 234 254 / 0.2);
-}
-
-.even\:bg-blue-100\/50:nth-child(even) {
-  background-color: rgb(219 234 254 / 0.5);
-}
-
-.even\:bg-blue-950\/20:nth-child(even) {
-  background-color: rgb(23 37 84 / 0.2);
-}
-
-.even\:bg-gray-200\/50:nth-child(even) {
-  background-color: rgb(229 231 235 / 0.5);
-}
-
-.even\:bg-gray-200\/80:nth-child(even) {
-  background-color: rgb(229 231 235 / 0.8);
-}
-
-.even\:bg-gray-200\/60:nth-child(even) {
-  background-color: rgb(229 231 235 / 0.6);
-}
-
-.even\:bg-blue-900\/60:nth-child(even) {
-  background-color: rgb(30 58 138 / 0.6);
-}
-
-.even\:bg-blue-900\/10:nth-child(even) {
-  background-color: rgb(30 58 138 / 0.1);
-}
-
-.even\:bg-blue-800\/10:nth-child(even) {
-  background-color: rgb(30 64 175 / 0.1);
-}
-
-.even\:bg-blue-600\/10:nth-child(even) {
-  background-color: rgb(37 99 235 / 0.1);
-}
-
 .even\:bg-blue-500\/10:nth-child(even) {
   background-color: rgb(59 130 246 / 0.1);
 }
 
-.even\:bg-blue-400\/10:nth-child(even) {
-  background-color: rgb(96 165 250 / 0.1);
-}
-
-.even\:bg-blue-600\/5:nth-child(even) {
-  background-color: rgb(37 99 235 / 0.05);
-}
-
-.even\:bg-blue-700\/5:nth-child(even) {
-  background-color: rgb(29 78 216 / 0.05);
-}
-
-.even\:bg-blue-700\/10:nth-child(even) {
-  background-color: rgb(29 78 216 / 0.1);
+.even\:bg-gray-200:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
 .hover\:border-blue-900:hover {