[PRAC/cont] Add tooltip for logo

Organizing tooltips by Tippy.js, initial setup/styling.

Worth noting:
  - Tippy's initialization separation logic (for searchLogo, for all others).

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/custom-tippy.css

@@ -0,0 +1,16 @@
+.tippy-box[data-theme~="main"] {
+  border-radius: 0;
+  padding: 5px 10px;
+  font-family: var(--open-sans), sans-serif;
+  font-size: 1em;
+  text-align: center;
+  color: var(--white);
+  background-color: var(--black);
+  /* оптимизация рендеринга (попытка исключить "легкое" размытие текста при появлении) */
+  will-change: transform;
+}
+
+.tippy-box[data-theme~="main"] .tippy-arrow {
+  margin-top: -1px;
+  color: var(--main-purple);
+}

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/style.css

@@ -3,3 +3,4 @@
 @import url("page.css");
 @import url("crm.css");
 @import url("crm-search.css");
+@import url("custom-tippy.css");

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/customTippy.js

@@ -25,25 +25,28 @@
       }
     }
 
-    initTippy('#formInputCollapse', 'развернуть/свернуть', 'right');
-    initTippy('#formFilterCollapse', 'развернуть/свернуть', 'right');
-    initTippy('#tableThTag', 'сбросить сортировку', 'right', {
-      offset: [0, -2],
-    });
-    initTippy('#tableThFIO', 'сортировать ⇵', 'bottom', {
-      offset: [0, -2],
-    });
-    initTippy('#tableThFaculty', 'сортировать ⇵', 'bottom', {
-      offset: [0, -2],
-    });
-    initTippy('#tableThBirthDate', 'сортировать ⇵', 'bottom', {
-      offset: [0, -2],
-    });
-    initTippy('#tableThStartYear', 'сортировать ⇵', 'bottom', {
-      offset: [0, -2],
-    });
-    initTippy('#linkToAddStudForm', 'к форме добавления', 'bottom');
-    initTippy('#deselectBtn', 'выделения студентов', 'bottom');
-    initTippy('#deleteBtn', 'выбранных студентов', 'right');
+    // инициализация Tippy только/для #search-logo (в зависимости от ширины экрана)
+    function initTippyForSearchLogo() {
+      const isSmallWidth = window.matchMedia('(max-width: 320px)').matches;
+      const searchLogo = document.querySelector('#search-logo');
+
+      if (isSmallWidth && searchLogo && !searchLogo._tippy) {
+        initTippy('#search-logo', 'Показать/скрыть..!?', 'top', {
+          offset: [0, 8],
+        });
+      } else if (!isSmallWidth && searchLogo && searchLogo._tippy) {
+        searchLogo._tippy.destroy(); // исключение всплывающей подсказки, если экран больше 320px
+      }
+    }
+
+    // инициализация Tippy для/всех "остальных" элементов (без учёта ширины экрана)
+    function initTippyForOther() {
+      // initTippy('#another-element', 'Подсказка для другого элемента', 'right');
+    }
+
+    initTippyForSearchLogo();
+    initTippyForOther();
+
+    window.addEventListener('resize', initTippyForSearchLogo); // отслеживание изменения ширины экрана (разрешения)
   });
 })();

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -30,6 +30,7 @@
   searchInputFeedback.textContent =
     'Введён не корректный запрос.. исключите: английские буквы, цифры!';
 
+  searchLogoImg.setAttribute('id', 'search-logo');
   searchLogoImg.setAttribute('src', 'images/skillbus-logo.svg');
   searchLogoImg.setAttribute('width', '50');
   searchLogoImg.setAttribute('height', '50');

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/libs/tippy-v6.3.7/animations/scale.css

@@ -1,15 +1,19 @@
 .tippy-box[data-animation="scale"][data-placement^="top"] {
   transform-origin: bottom;
 }
+
 .tippy-box[data-animation="scale"][data-placement^="bottom"] {
   transform-origin: top;
 }
+
 .tippy-box[data-animation="scale"][data-placement^="left"] {
   transform-origin: right;
 }
+
 .tippy-box[data-animation="scale"][data-placement^="right"] {
   transform-origin: left;
 }
+
 .tippy-box[data-animation="scale"][data-state="hidden"] {
   transform: scale(0.5);
   opacity: 0;