https://academy.mlcto.com/wp-content/plugins/cco_logowall/js/ccologo-tooltip.js

1/*  
2   - On crée un seul conteneur de tooltip qu'on positionne en "absolute"
3   - On le stylise via data-tt-bg / data-tt-txt
4   - On centre le tooltip au-dessus de l'item (approx.)
5*/
6jQuery(document).ready(function ($) {
7  // Conserver l'ancien code qui gère la grille responsive
8  // (cols_desktop, etc.) :
9
10  function adjustLogoGrid() {
11    $(".ccologo-container").each(function () {
12      var $container = $(this);
13      var colsDesktop = parseInt($container.data("cols-desktop"), 10) || 4;
14      var colsTablet = parseInt($container.data("cols-tablet"), 10) || 3;
15      var colsMobile = parseInt($container.data("cols-mobile"), 10) || 2;
16      var winWidth = $(window).width();
17
18      var cols = winWidth >= 1025 ? colsDesktop : winWidth >= 768 ? colsTablet : colsMobile;
19
20      $container.css({
21        "grid-template-columns": "repeat(" + cols + ", 1fr)",
22      });
23
24      // Retrait + ajout des classes lastcol / lastrow si on a des séparations internes
25      $container.find(".ccologo-item").removeClass("ccologo-lastcol ccologo-lastrow");
26      var $items = $container.find(".ccologo-item");
27      $items.each(function (index) {
28        var i = index + 1;
29        if (cols > 0 && i % cols === 0) {
30          $(this).addClass("ccologo-lastcol");
31        }
32      });
33      var total = $items.length;
34      var startLastRow = total - (total % cols === 0 ? cols : total % cols);
35      for (var j = startLastRow; j < total; j++) {
36        $items.eq(j).addClass("ccologo-lastrow");
37      }
38    });
39  }
40
41  adjustLogoGrid();
42  $(window).on("resize", adjustLogoGrid);
43
44  // ------------------------------------------------
45  // SYSTÈME DE TOOLTIP
46  // ------------------------------------------------
47  // On crée un conteneur .ccologo-tooltip + position absolute
48  var $tooltip = $('<div class="ccologo-tooltip"></div>').appendTo("body").hide();
49
50  $(".ccologo-item").hover(
51    function (e) {
52      var $item = $(this);
53      var text = $item.attr("title") || "";
54      if (!text) return; // pas de tooltip si vide
55
56      // Enregistrer la valeur pour la restituer plus tard
57      $item.data("orig-title", text);
58      // Retirer l'attribut title => évite le tooltip natif du navigateur
59      $item.removeAttr("title");
60
61      // Couleurs depuis le parent .ccologo-container
62      var $container = $item.closest(".ccologo-container");
63      var bgColor = $container.attr("data-tt-bg") || "#333";
64      var txtColor = $container.attr("data-tt-txt") || "#fff";
65
66      $tooltip
67        .text(text)
68        .css({
69          "background-color": bgColor,
70          color: txtColor,
71        })
72        .fadeIn(200);
73
74      // Centrer le tooltip au-dessus du logo
75      var offset = $item.offset();
76      var itemWidth = $item.outerWidth();
77      var tooltipWidth = $tooltip.outerWidth();
78
79      var leftPos = offset.left + itemWidth / 2 - tooltipWidth / 2;
80      var topPos = offset.top - $tooltip.outerHeight() - 8; // 8px au-dessus
81
82      $tooltip.css({
83        position: "absolute",
84        left: leftPos + "px",
85        top: topPos + "px",
86        "z-index": 999999,
87      });
88    },
89    function (e) {
90      // Au mouseleave, on cache + on restaure le title
91      var $item = $(this);
92      var orig = $item.data("orig-title");
93      if (orig) {
94        $item.attr("title", orig);
95      }
96      $tooltip.hide().text("");
97    }
98  );
99});