From 7d3d9d5df061a25a9819b1bfc55870e7066f6253 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 27 Sep 2022 12:22:35 +0200
Subject: [PATCH] wait #5483 @0:20

---
 inc/menu.php        | 10 +++++-----
 js/script.js        | 16 +++++++++++++++-
 style/inc/menu.sass | 12 +++++++++++-
 style/style.sass    |  2 +-
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/inc/menu.php b/inc/menu.php
index 29e2a82..13604b7 100644
--- a/inc/menu.php
+++ b/inc/menu.php
@@ -6,7 +6,7 @@
         </div>
         <nav>
             <ul>
-                <li data-tooltip="Mon portefeuille">
+                <li>
                     <a href="#" class="open-submenu">
                         <div data-icon="menu-portefeuille"></div>
                         <span>Mon portefeuille</span>
@@ -17,7 +17,7 @@
                         <li><a href="simulations.html">Simulations</a></li>
                     </ul>
                 </li>
-                <li data-tooltip="Mes missions">
+                <li>
                     <a href="#" class="open-submenu">
                         <div data-icon="menu-missions"></div>
                         <span>Mes missions</span>
@@ -28,7 +28,7 @@
                         <li><a href="rapport.html">Rapport</a></li>
                     </ul>
                 </li>
-                <li data-tooltip="Outils experts">
+                <li>
                     <a href="#" class="open-submenu">
                         <div data-icon="menu-mode-expert"></div>
                         <span>Outils experts</span>
@@ -38,13 +38,13 @@
                         <li><a href="refacturation.html">Refacturation</a></li>
                     </ul>
                 </li>
-                <li data-tooltip="Veille EIF">
+                <li>
                     <a href="#">
                         <div data-icon="menu-veille-EIF"></div>
                         <span>Veille EIF</span>
                     </a>
                 </li>
-                <li data-tooltip="Mon compte">
+                <li>
                     <a href="#" class="open-submenu">
                         <div data-icon="menu-mon-compte"></div>
                         <span>Mon compte</span>
diff --git a/js/script.js b/js/script.js
index 32e9098..66270a5 100644
--- a/js/script.js
+++ b/js/script.js
@@ -4,6 +4,20 @@ $(function () {
         tippy(this, {content: $(this).attr('data-tooltip')});
     });
 
+    // Tooltip du menu (uniquement en mode compact)
+    $("#menu nav>ul>li>a").each(function () {
+        tippy(this, {content: $(this).find('span').text(), trigger: 'manual', theme: 'menu'});
+    });
+    $(document).on('mouseover', '.menu-compact #menu nav>ul>li>a', function () {
+        this._tippy.show();
+        clearTimeout(this._tippyHideTimeout);
+    }).on('mouseout', '#menu nav>ul>li>a', function () {
+        var $this = this;
+        this._tippyHideTimeout = setTimeout(function () {
+            $this._tippy.hide();
+        }, 50);
+    });
+
     // Ajouter les symboles SVG
     $("[data-icon]").each(function () {
         $(this).append(getSpriteIcon('eif-' + $(this).data('icon')));
@@ -28,7 +42,7 @@ $(function () {
     });
 });
 
-function resize(){
+function resize() {
 
 }
 
diff --git a/style/inc/menu.sass b/style/inc/menu.sass
index 6f24411..0e0f9b6 100644
--- a/style/inc/menu.sass
+++ b/style/inc/menu.sass
@@ -142,4 +142,14 @@ header
 
     .toggle-menu
       svg
-        transform: scale(1, 1)
\ No newline at end of file
+        transform: scale(1, 1)
+
+.tippy-box[data-theme~='menu']
+  $tooltip-menu-background: #ccc
+  background-color: $tooltip-menu-background
+  color: #000
+
+  &[data-placement^='top'], &[data-placement^='bottom'], &[data-placement^='left'], &[data-placement^='right']
+    > .tippy-arrow::before
+      border-top-color: $tooltip-menu-background
+
diff --git a/style/style.sass b/style/style.sass
index 77550c0..bf0a633 100644
--- a/style/style.sass
+++ b/style/style.sass
@@ -46,10 +46,10 @@ main
       article
         height: 100px
         text-align: right
+        color: $headings-color
 
         strong
           font-weight: 900
-          color: $headings-color
           font-size: 36px
           margin-top: 10px
           display: block
-- 
2.39.5