File size: 4,852 Bytes
6aae67a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 |
/**
* 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
// }
// }
|