| /** | |
| * Regolare i valori di calc() per distanze diverse | |
| * Aggiungere white-space: normal per tooltip multi-riga | |
| * Modificare border-width per frecce più grandi/più piccole | |
| * | |
| * Nota importante: | |
| * Il sistema sfrutta l'attributo data-tooltip per il contenuto testuale, | |
| * mantenendo HTML semantico e accessibile. | |
| * Per contenuti dinamici, basta modificare l'attributo via JavaScript. | |
| * Esmpio: | |
| * <span class="menu-h-box tt-right" data-tt="Open"> | |
| * <span class="menu-h-inner"></span> | |
| * </span> | |
| * | |
| * @format | |
| */ | |
| /* ========= VARIABILI LESS ========= */ | |
| @tt-bg: #cc3a05; // Colore di sfondo del tooltip | |
| @tt-text: #ffffff; // Colore testo del tooltip | |
| @tt-font: 20px "Arial", sans-serif; // Stile font | |
| @tt-radius: 4px; // Border-radius | |
| @tt-shadow: 0 3px 6px #e2ca0e29; // Ombra | |
| @tt-transition: 0.3s opacity; // Transizione | |
| @border-width: 6px; | |
| /* ========= BASE TOOLTIP ========= */ | |
| .tt-top, | |
| .tt-bottom, | |
| .tt-left, | |
| .tt-leftx, | |
| .tt-right { | |
| position: relative; | |
| // cursor: help; | |
| transition: 0.2s transform; | |
| // Pseudo-elementi comuni | |
| &::before, | |
| &::after { | |
| position: absolute; | |
| opacity: 0; | |
| pointer-events: none; | |
| z-index: 9999; | |
| transition: @tt-transition; | |
| } | |
| // Testo del tooltip | |
| &::before { | |
| content: attr(data-tt); | |
| background: @tt-bg; | |
| color: @tt-text; | |
| font: @tt-font; | |
| font-weight: normal; | |
| // padding: 8px 16px; | |
| padding: 4px 10px; | |
| border-radius: @tt-radius; | |
| box-shadow: @tt-shadow; | |
| // border: 2px solid yellow; | |
| white-space: nowrap; | |
| } | |
| // Freccia | |
| // &::after { | |
| // content: ""; | |
| // border: @border-width solid transparent; | |
| // } | |
| // Hover states | |
| &:hover { | |
| &::before, | |
| &::after { | |
| opacity: 1; | |
| } | |
| } | |
| } | |
| /* ========= POSIZIONAMENTI ========= */ | |
| .tt-top { | |
| &::before { | |
| bottom: ~"calc(100% + 12px)"; // Posizionato sopra l'elemento di 12px | |
| left: 50%; // Centrato orizzontalmente | |
| transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza | |
| } | |
| // &::after { | |
| // border-top-color: @tt-bg; // Colore del bordo superiore per la freccia | |
| // bottom: ~"calc(100% + 0px)"; // Posizionato sopra l'elemento | |
| // left: 50%; // Centrato orizzontalmente | |
| // transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza | |
| // } | |
| } | |
| .tt-bottom { | |
| &::before { | |
| top: ~"calc(100% + 12px)"; // Posizionato sotto l'elemento di 12px | |
| left: 50%; // Centrato orizzontalmente | |
| transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza | |
| } | |
| // &::after { | |
| // border-bottom-color: @tt-bg; // Colore del bordo inferiore per la freccia | |
| // top: ~"calc(100% + 0px)"; // Posizionato sotto l'elemento | |
| // left: 50%; // Centrato orizzontalmente | |
| // transform: translateX(-50%); // Spostato indietro del 50% della sua larghezza | |
| // } | |
| } | |
| .tt-left { | |
| &::before { | |
| right: ~"calc(50% + 0px)"; | |
| top: ~"calc(100% + 22px)"; | |
| transform: translateY(-50%); | |
| } | |
| // &::after { | |
| // border-left-color: @tt-bg; | |
| // right: ~"calc(100% + 0px)"; | |
| // top: 50%; | |
| // transform: translateY(-50%); | |
| // } | |
| } | |
| .tt-leftx { | |
| &::before { | |
| right: ~"calc(50% + 20px)"; | |
| top: ~"calc(100% + 22px)"; | |
| transform: translateY(-80%); | |
| } | |
| } | |
| // .tt-left { | |
| // &::before { | |
| // right: ~"calc(100% + 12px)"; // Posizionato a sinistra dell'elemento di 12px | |
| // top: 50%; // Centrato verticalmente | |
| // transform: translateY(-50%); // Spostato in alto del 50% della sua altezza | |
| // } | |
| // &::after { | |
| // border-left-color: @tt-bg; // Colore del bordo sinistro per la freccia | |
| // right: ~"calc(100% + 0px)"; // Posizionato a sinistra dell'elemento | |
| // top: 50%; // Centrato verticalmente | |
| // transform: translateY(-50%); // Spostato in alto del 50% della sua altezza | |
| // } | |
| // } | |
| .tt-right { | |
| &::before { | |
| left: ~"calc(100% + 12px)"; // Posizionato a destra dell'elemento di 12px | |
| top: 50%; // Centrato verticalmente | |
| transform: translateY(50%); // Spostato in alto del 50% della sua altezza | |
| } | |
| // &::after { | |
| // border-right-color: @tt-bg; // Colore del bordo destro per la freccia | |
| // left: ~"calc(100% + 0px)"; // Posizionato a destra dell'elemento | |
| // top: 50%; // Centrato verticalmente | |
| // transform: translateY(-50%); // Spostato in alto del 50% della sua altezza | |
| // } | |
| } | |
| // .tt-right { | |
| // &::before { | |
| // left: ~"calc(100% + 12px)"; // Posizionato a destra dell'elemento di 12px | |
| // top: 50%; // Centrato verticalmente | |
| // transform: translateY(-50%); // Spostato in alto del 50% della sua altezza | |
| // } | |
| // &::after { | |
| // border-right-color: @tt-bg; // Colore del bordo destro per la freccia | |
| // left: ~"calc(100% + 0px)"; // Posizionato a destra dell'elemento | |
| // top: 50%; // Centrato verticalmente | |
| // transform: translateY(-50%); // Spostato in alto del 50% della sua altezza | |
| // } | |
| // } | |