Skip to content

Commit 8cd643a

Browse files
Pek5892Pek5892
committed
refactor: miglioria tooltip
1 parent 9ed2f2e commit 8cd643a

4 files changed

Lines changed: 154 additions & 35 deletions

File tree

‎assets/src/css/style.css‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -369,11 +369,13 @@ span.form-control {
369369
/* ===== UI TOOLTIP STYLES ===== */
370370

371371
.ui-tooltip {
372-
background: #222;
373-
color: white;
372+
background: #e0e6eb;
373+
color: #000000;
374374
border: 0;
375375
font-size: 11px;
376376
z-index: 9990;
377+
border-radius: 8px;
378+
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
377379
}
378380

379381
/* ===== SHORTENED TEXT STYLES ===== */
@@ -400,7 +402,7 @@ span.form-control {
400402

401403
/* Base tooltip styles */
402404
.tooltipster-shadow {
403-
border-radius: 4px !important;
405+
border-radius: 8px !important;
404406
box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
405407
border: none !important;
406408
background-color: #e0e6eb !important;
@@ -414,6 +416,7 @@ span.form-control {
414416
color: #000000 !important;
415417
overflow: hidden !important;
416418
word-wrap: break-word !important;
419+
border-radius: 8px !important;
417420
}
418421

419422
.tooltipster-base {
@@ -422,6 +425,7 @@ span.form-control {
422425
z-index: 10000 !important; /* Consistent z-index for all tooltip states */
423426
background-color: #e0e6eb !important;
424427
border: none !important;
428+
border-radius: 8px !important;
425429
}
426430

427431
/* Rimuove i bordi esterni dai tooltip */
@@ -432,6 +436,44 @@ span.form-control {
432436
border: none !important;
433437
}
434438

439+
/* Rimuove completamente l'ombra inferiore dai tooltip */
440+
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box {
441+
box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
442+
border: none !important;
443+
}
444+
445+
/* Rimuove qualsiasi ombra o bordo dai tooltip */
446+
.tooltipster-sidetip {
447+
border: none !important;
448+
box-shadow: none !important;
449+
}
450+
451+
/* Rimuove qualsiasi ombra o bordo inferiore dai tooltip */
452+
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box:after,
453+
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box:before,
454+
.tooltipster-sidetip.tooltipster-shadow:after,
455+
.tooltipster-sidetip.tooltipster-shadow:before,
456+
.tooltipster-sidetip .tooltipster-arrow,
457+
.tooltipster-arrow-border,
458+
.tooltipster-arrow-background {
459+
display: none !important;
460+
border: none !important;
461+
box-shadow: none !important;
462+
background: none !important;
463+
}
464+
465+
/* Arrotonda i bordi del box del tooltip */
466+
.tooltipster-box {
467+
border-radius: 8px !important;
468+
border: none !important;
469+
box-shadow: none !important;
470+
}
471+
472+
/* Rimuove completamente la freccia del tooltip */
473+
.tooltipster-arrow {
474+
display: none !important;
475+
}
476+
435477
/* Nasconde le barre di scorrimento */
436478
.tooltipster-content::-webkit-scrollbar {
437479
display: none !important;
@@ -448,8 +490,8 @@ span.form-control {
448490
padding: 8px;
449491
background-color: #3c8dbc;
450492
color: white;
451-
border-top-left-radius: 3px;
452-
border-top-right-radius: 3px;
493+
border-top-left-radius: 8px;
494+
border-top-right-radius: 8px;
453495
margin: -8px -8px 8px -8px;
454496
}
455497

‎assets/src/js/functions/init.js‎

Lines changed: 92 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,32 +23,20 @@ function init() {
2323
});
2424
$('[data-href]').not('.ask, .bound').addClass('bound clickable');
2525

26-
// Tooltip
27-
$('.tip').not('.tooltipstered').each(function () {
28-
$this = $(this);
29-
$this.tooltipster({
30-
animation: 'grow',
31-
contentAsHTML: true,
32-
hideOnClick: true,
33-
onlyOne: true,
34-
maxWidth: 350,
35-
touchDevices: true,
36-
trigger: 'hover',
37-
position: $this.data('position') ? $this.data('position') : 'top',
38-
});
39-
});
26+
// Inizializza tutti i tooltip con Tooltipster
27+
initTooltips();
4028

4129
if ($('form').length) {
4230
$('form').not('.no-check').parsley();
43-
31+
4432
if (window.CKEDITOR){
4533
CKEDITOR.on('instanceReady', function () {
4634
$('form textarea').each(function () {
4735
if ($(this).data('mandatory') === '1') {
4836
$(this).prop('required', true);
4937
}
5038
});
51-
39+
5240
$.each(CKEDITOR.instances, function (instance) {
5341
CKEDITOR.instances[instance].on("change", function (e) {
5442
for (instance in CKEDITOR.instances) {
@@ -89,3 +77,91 @@ function init() {
8977

9078
restart_inputs();
9179
}
80+
81+
/**
82+
* Funzione per standardizzare l'inizializzazione dei tooltip utilizzando Tooltipster
83+
* Converte anche i tooltip Bootstrap (data-toggle="tooltip") in tooltip Tooltipster
84+
*/
85+
function initTooltips() {
86+
// Opzioni standard per Tooltipster
87+
const tooltipsterOptions = {
88+
animation: 'grow',
89+
contentAsHTML: true,
90+
hideOnClick: true,
91+
onlyOne: true,
92+
maxWidth: 350,
93+
touchDevices: true,
94+
trigger: 'hover',
95+
theme: 'tooltipster-shadow',
96+
interactive: false,
97+
speed: 200,
98+
delay: 200,
99+
arrow: false, // Disabilita la freccia del tooltip
100+
border: false, // Disabilita il bordo
101+
functionReady: function(instance, helper) {
102+
// Rimuove qualsiasi ombra o bordo quando il tooltip viene mostrato
103+
$(".tooltipster-base").css({
104+
"box-shadow": "none",
105+
"border": "none"
106+
});
107+
108+
// Rimuove la freccia del tooltip
109+
$(".tooltipster-arrow").css("display", "none");
110+
}
111+
};
112+
113+
// Inizializza i tooltip con classe .tip
114+
$('.tip').not('.tooltipstered').each(function () {
115+
const $this = $(this);
116+
const position = $this.data('position') ? $this.data('position') : 'top';
117+
118+
$this.tooltipster({
119+
...tooltipsterOptions,
120+
position: position,
121+
});
122+
});
123+
124+
// Converti i tooltip Bootstrap (data-toggle="tooltip") in tooltip Tooltipster
125+
$('[data-toggle="tooltip"]').not('.tooltipstered').each(function () {
126+
const $this = $(this);
127+
128+
// Ottieni il titolo dal tooltip Bootstrap
129+
const title = $this.attr('title') || $this.data('original-title');
130+
131+
// Rimuovi gli attributi di Bootstrap per evitare conflitti
132+
$this.removeAttr('data-toggle');
133+
$this.removeAttr('data-original-title');
134+
135+
// Aggiungi la classe .tip per coerenza
136+
$this.addClass('tip');
137+
138+
// Inizializza Tooltipster
139+
$this.tooltipster({
140+
...tooltipsterOptions,
141+
content: title,
142+
position: $this.data('placement') || 'top',
143+
});
144+
});
145+
146+
// Converti i tooltip jQuery UI in tooltip Tooltipster
147+
$('.ui-tooltip-content').each(function() {
148+
const $this = $(this);
149+
const $parent = $this.parent();
150+
151+
// Ottieni il contenuto
152+
const content = $this.html();
153+
154+
// Rimuovi il tooltip jQuery UI
155+
$parent.remove();
156+
157+
// Trova l'elemento originale e inizializza Tooltipster
158+
const $target = $('[aria-describedby="' + $parent.attr('id') + '"]');
159+
if ($target.length) {
160+
$target.addClass('tip');
161+
$target.tooltipster({
162+
...tooltipsterOptions,
163+
content: content,
164+
});
165+
}
166+
});
167+
}

‎modules/impostazioni/edit.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ function caricaSezione(header) {
225225
localLoading(container, false);
226226
227227
// Inizializza i tooltip per gli elementi appena caricati
228-
container.find("[data-toggle=\'tooltip\']").tooltip();
228+
initTooltips();
229229
230230
// Mostra il contenuto con animazione
231231
container.slideDown(300);
@@ -301,7 +301,7 @@ function caricaSezioneConFiltro(header, impostazioni_filtrate) {
301301
localLoading(container, false);
302302
303303
// Inizializza i tooltip per gli elementi appena caricati
304-
container.find("[data-toggle=\'tooltip\']").tooltip();
304+
initTooltips();
305305
306306
// Filtra le impostazioni: nascondi quelle che non corrispondono alla ricerca
307307
const ids_da_mostrare = impostazioni_filtrate.map(item => item.id);

‎modules/mappa/css/app.css‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -191,8 +191,8 @@ a:active, a:hover, a:focus {
191191
/* Improve controls styling */
192192
.leaflet-control-layers,
193193
.leaflet-bar {
194-
border-radius: 4px !important;
195-
box-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
194+
border-radius: 8px !important;
195+
box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
196196
}
197197

198198
.leaflet-control-layers-toggle {
@@ -213,11 +213,11 @@ a:active, a:hover, a:focus {
213213
transform: translate(-50%, -50%);
214214
background: rgba(255, 255, 255, 0.9);
215215
padding: 8px 12px;
216-
border-radius: 4px;
217-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
216+
border-radius: 8px;
217+
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
218218
z-index: 1000;
219219
font-size: 13px;
220-
border: 1px solid #e0e0e0;
220+
border: none;
221221
}
222222

223223
.map-loading i {
@@ -227,22 +227,22 @@ a:active, a:hover, a:focus {
227227

228228
/* Custom tooltip */
229229
.custom-tooltip {
230-
background: rgba(255, 255, 255, 0.95);
230+
background: #e0e6eb;
231231
border: none;
232-
border-radius: 4px;
233-
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
232+
border-radius: 8px;
233+
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
234234
padding: 6px 10px;
235235
font-size: 12px;
236236
font-weight: 600;
237-
color: #333;
237+
color: #000000;
238238
max-width: 250px;
239239
white-space: normal;
240240
word-wrap: break-word;
241241
}
242242

243243
/* Custom popup */
244244
.custom-popup .leaflet-popup-content-wrapper {
245-
border-radius: 4px;
245+
border-radius: 8px;
246246
padding: 0;
247247
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
248248
max-width: 300px;
@@ -337,14 +337,15 @@ a:active, a:hover, a:focus {
337337
transition: all 0.3s ease;
338338
max-height: 80vh;
339339
overflow-y: auto;
340-
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
340+
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
341341
transform: translateY(-50%);
342342
background-color: #fff;
343+
border-radius: 8px;
343344
}
344345

345346
#menu-filtri {
346347
margin-bottom: 0;
347-
border-radius: 4px;
348+
border-radius: 8px;
348349
overflow: visible;
349350
max-width: 100%;
350351
}

0 commit comments

Comments
 (0)