</div>
<nav>
<ul>
- <li data-tooltip="Mon portefeuille">
+ <li>
<a href="#" class="open-submenu">
<div data-icon="menu-portefeuille"></div>
<span>Mon portefeuille</span>
<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>
<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>
<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>
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')));
});
});
-function resize(){
+function resize() {
}
.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
+
article
height: 100px
text-align: right
+ color: $headings-color
strong
font-weight: 900
- color: $headings-color
font-size: 36px
margin-top: 10px
display: block