[PRAC/cont] Delete "bootstrap-tooltips" logic

Returning to tooltips organization by Tippy.js lib's.

Worth noting:
  - difficulties encountered when customizing/positioning "bootstrap-tooltips".

core: B-3 / JS-BL

Author: matowdev

…el/sb-crm-client/css/custom-tooltips.css …level/sb-crm-client/css/custom-tippy.csscore-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/custom-tooltips.css renamed to core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/custom-tippy.css core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/custom-tooltips.css renamed to core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/custom-tippy.css

@@ -1,5 +1,4 @@
-.tooltip {
-  position: relative;
+.tippy-box[data-theme~="main"] {
   border-radius: 0;
   padding: 5px 10px;
   font-family: var(--open-sans), sans-serif;
@@ -11,9 +10,8 @@
   will-change: transform;
 }
 
-.tooltip .tooltip-inner {
-  border-radius: 0;
-  padding: 5px 10px;
-  color: var(--white);
-  background-color: var(--black);
+.tippy-box[data-theme~="main"] .tippy-arrow {
+  margin-top: -1px;
+  margin-right: -1px;
+  color: var(--main-purple);
 }

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

@@ -6,4 +6,4 @@
 @import url("crm-output.css");
 @import url("crm-add.css");
 @import url("modal-add.css");
-@import url("custom-tooltips.css");
+@import url("custom-tippy.css");

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

@@ -9,10 +9,14 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="libs/bootstrap-v5.3.3/bootstrap.min.css">
   <link rel="stylesheet" href="libs/bootstrap-icons-v1.11.3/font/bootstrap-icons.css">
+  <link rel="stylesheet" href="libs/tippy-v6.3.7/tippy.min.css">
+  <link rel="stylesheet" href="libs/tippy-v6.3.7/animations/scale.css">
   <link rel="stylesheet" href="css/style.css">
   <script src="libs/jquery-v3.7.1/jquery-3.7.1.min.js" defer></script>
-  <script src="libs/bootstrap-v5.3.3/bootstrap.bundle.min.js" defer></script>
-  <script src="js/bootstrapTooltips.js" defer></script>
+  <script src="libs/bootstrap-v5.3.3/bootstrap.min.js" defer></script>
+  <script src="libs/tippy-v6.3.7/popper.min.js" defer></script>
+  <script src="libs/tippy-v6.3.7/tippy.umd.min.js" defer></script>
+  <script src="js/customTippy.js" defer></script>
   <script src="js/index.js" defer></script>
 </head>
 

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

@@ -0,0 +1,66 @@
+(() => {
+  // в данной реализации прослушка DOMContentLoaded необходима
+  document.addEventListener('DOMContentLoaded', () => {
+    function initTippy(selector, content, side, customOptions = {}) {
+      if (typeof tippy === 'function') {
+        const defaultOptions = {
+          content: content,
+          theme: 'main',
+          delay: [50, 0],
+          offset: [0, 12],
+          placement: side,
+          animation: 'scale', // анимация появления/скрытия (через дополнительный файл/подключение)
+          trigger: 'mouseenter', // только по наведению мыши (исключение вывода по клику, в другом месте)
+
+          onShow(instance) {
+            setTimeout(() => {
+              instance.hide(); // автоматическое скрытие (по истечению времени)
+            }, 1000);
+          },
+        };
+
+        tippy(selector, { ...defaultOptions, ...customOptions }); // применение "общих" настроек с возможностью переопределения/индивидуального изменения, согласно customOptions
+      } else {
+        console.error('Tippy.js is not loaded!');
+      }
+    }
+
+    // инициализация 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('#hash-tag-title', 'сбросить сортировку', 'bottom', {
+        offset: [0, 2],
+      });
+      initTippy('#table-th-id', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+      initTippy('#table-th-fio', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+      initTippy('#table-th-dt', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+      initTippy('#table-th-change', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+    }
+
+    initTippyForSearchLogo();
+    initTippyForOther();
+
+    window.addEventListener('resize', initTippyForSearchLogo); // отслеживание изменения ширины экрана (разрешения)
+  });
+})();

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

@@ -0,0 +1,20 @@
+.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;
+}