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

Changing from using a third-party Tippy.js lib to Bootstrap's features.

Worth noting:
  - unsolved moment with changing the color for the "triangle/nose" of the tooltip.

core: B-3 / JS-BL

Author: matowdev

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

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

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-tippy.css");
+@import url("custom-tooltips.css");

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

@@ -9,14 +9,10 @@
   <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.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="libs/bootstrap-v5.3.3/bootstrap.bundle.min.js" defer></script>
+  <script src="js/bootstrapTooltips.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,74 @@
+(() => {
+  document.addEventListener('DOMContentLoaded', () => {
+    function initBootstrapTooltip(
+      selector,
+      content,
+      placement,
+      customOptions = {}
+    ) {
+      const element = document.querySelector(selector);
+      if (element) {
+        const defaultOptions = {
+          title: content,
+          placement: placement,
+          trigger: 'hover', // появление по наведению мыши
+          delay: { show: 50, hide: 0 }, // задержка появления
+        };
+
+        const options = { ...defaultOptions, ...customOptions };
+
+        if (element.tooltipInstance) {
+          element.tooltipInstance.dispose(); // удаление предыдущего tooltip (т.е. здесь появление, там сразу скрытие)
+        }
+
+        const tooltip = new bootstrap.Tooltip(element, options); // инициализация Bootstrap tooltips
+
+        element.addEventListener('shown.bs.tooltip', () => {
+          setTimeout(() => {
+            tooltip.hide(); // автоматическое скрытие (по истечению времени)
+          }, 1000);
+        });
+
+        element.tooltipInstance = tooltip; // фиксация tooltip на элементе
+      }
+    }
+
+    // инициализация Tippy только/для #search-logo (в зависимости от ширины экрана)
+    function initTooltipForSearchLogo() {
+      const isSmallWidth = window.matchMedia('(max-width: 320px)').matches; // уточнение ширины
+      const searchLogo = document.querySelector('#search-logo');
+
+      if (isSmallWidth && searchLogo) {
+        initBootstrapTooltip('#search-logo', 'Показать/скрыть..!?', 'top', {
+          offset: [0, 8],
+        });
+      } else if (!isSmallWidth && searchLogo && searchLogo.tooltipInstance) {
+        searchLogo.tooltipInstance.dispose(); // исключение всплывающей подсказки, если экран больше 320px
+      }
+    }
+
+    // инициализация Tippy для/всех "остальных" элементов (без учёта ширины экрана)
+    function initTooltipForOther() {
+      initBootstrapTooltip('#hash-tag-title', 'сбросить сортировку', 'bottom', {
+        offset: [0, 2],
+      });
+      initBootstrapTooltip('#table-th-id', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+      initBootstrapTooltip('#table-th-fio', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+      initBootstrapTooltip('#table-th-dt', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+      initBootstrapTooltip('#table-th-change', 'сортировать ⇵', 'bottom', {
+        offset: [0, 2],
+      });
+    }
+
+    initTooltipForSearchLogo();
+    initTooltipForOther();
+
+    window.addEventListener('resize', initTooltipForSearchLogo); // отслеживание изменения ширины экрана (разрешения)
+  });
+})();