Button with Custom Alert

metodo con classLister e tre classi

Questa è un'Alert Personalizzata

Senza uso della ckasse show

Si tratta di tooltip personalizzati. O associati ad un pulsante che se premuto li visualizza, poi cliccando sul tooltip lo si può chiudere. Oppure associati a delle pagine indice dove scorrendo sulle voci quando il mouse passa su una di esse compare la toltip relativa con le informazioni sulla voce quando il mouse esce la toltip scompare.

Ci possono essere diverse modalità.

Per quanto riguarda quelli associati ad un pulsante possiamo avere un insieme di stili (sia nel codice della pagina sia esterni su file.css di questo tipo:

alert.css:

 1 .custom-alert {
 2     position: fixed;
 3     top: 50px;
 4     left: 50%;
 5     transform: translate(-50%, 0%);
 6     background-color: #ffffff;
 7     border: 2px solid #000000;
 8     padding: 20px;
 9     border-radius: 10px;
10     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
11     z-index: 9999;
12     display: none; /* Inizialmente nascosto */
13 }
14 
15 .show {
16     display: block; /* Mostrato quando aggiungi la classe "show" */
17 }
18 
19 .custom-alert.show {
20     border: 2px solid red; /* Ulteriori stili quando entrambe le classi sono presenti */
21 }
22

aleScript.js:

 1 class MyAlert {
 2     static Show(objname) {
 3         var obj = document.getElementById(objname);
 4        obj.classList.add('show');
 5     }
 6         static hide(objname) {
 7         var obj = document.getElementById(objname);
 8        obj.classList.remove('show');
 9     }
10 }

Qui i due metodi uno visualizza e l'altro nasconde il tooltip

aleScriptTog.js:

1 class MyAlert {
2     static toggleShow(objname) {
3         var obj = document.getElementById(objname);
4        obj.classList.toggle('show');
5     }
6 }

Qui invece una volta che viene usato visualizza la seconda volta nasconde, poi di nuovo visualizza e così via.

addShowSep.html:

 1 <!DOCTYPE html>
 2 <html lang="it">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <title>Button with Custom Alert</title>
 7 <link rel="icon" href="https://www.cersil.it/ar/img/favicon.ico">
 8 <link href="../../css/pag.css" rel="stylesheet" type="text/css" />
 9 <link href="../../css/codice.css" rel="stylesheet" type="text/css" />
10 <link href="css/alert.css" rel="stylesheet" type="text/css">
11 <script src="script/aleScript.js"></script>     
12 </head>
13 <body>
14   <p class="tit3">&nbsp;</p>
15   <p class="tit3">&nbsp;</p>
16   <button id="but-alert" onclick="MyAlert.Show('cust-alert')">Toggle Alert</button>
17         <div id="cust-alert" onclick="MyAlert.hide('cust-alert')" class="custom-alert">
18                 <p>Questa è un'Alert Personalizzata</p>
19                 <p>Con uso del metodo show e hide</p>
20         </div>
21     <p>&nbsp;</p>   
22 </body>
23 </html>

addShowUni.html:

 1 <!DOCTYPE html>
 2 <html lang="it">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <title>Button with Custom Alert</title>
 7 <link rel="icon" href="https://www.cersil.it/ar/img/favicon.ico">
 8 <link href="../../css/pag.css" rel="stylesheet" type="text/css" />
 9 <style>
10 c {
11     position: fixed;
12     top: 60px;
13     left: 50%;
14     transform: translate(-50%, 0%);
15     background-color: #ffffff;
16     border: 2px solid #000000;
17     padding: 20px;
18     border-radius: 10px;
19     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
20     z-index: 9999;
21     display: none; /* Inizialmente nascosto */
22 }
23 
24 .custom-alert p {
25     margin: 0;
26 }
27 
28 .show {
29     display: block; /* Mostrato quando aggiungi la classe "show" */
30 }
31 .custom-alert.show {
32      border: 2px solid red; /* Ulteriori stili quando entrambe le classi sono presenti */
33 }
34 </style>
35 <script>
36         class MyAlert {
37     static Show(objname) {
38         var obj = document.getElementById(objname);
39        obj.classList.add('show');
40     }
41          static hide(objname) {
42         var obj = document.getElementById(objname);
43        obj.classList.remove('show');
44     }
45 }       
46 </script>       
47 </head>
48 <body>
49     <p class="tit3">&nbsp;</p>
50     <p class="tit3">&nbsp;</p>
51     <p class="tit3">&nbsp;</p>
52 <button id="but-alert" onclick="MyAlert.Show('cust-alert')">Toggle Alert</button>
53 <div id="cust-alert" onclick="MyAlert.hide('cust-alert')" class="custom-alert">
54         <p>Questa è un'Alert Personalizzata</p>
55         <p>Con uso del metodo show e hide</p>
56 </div>
57 </body>
58 </html>
59

Descrizione:

Nel css vi sono tre stili il .custom-alert descrive le caratteristiche del tooltip,.show rende visibile il tooltip e .custom-alert.show sta ad indicare che il toltip ha contemporaneamente entrabe .custom-alert e .show nella sua classList allora applicherà lo stile .custom-alert.show.

Ogni elemento di una pagina html può avere uno o più stili questi vengono caricati in una sorta di array che si chiama classList e lo si può fare tramite: elemento.classList.add('show'); che significa aggiungii alla lista delle classi dell'eemento la classe show. Se ad es un elemento, nel nostro caso la div con id="cust-alert", ha già una classe assegnata la.custom-alert nel momento che carichhiamo la show ne avrà due. Le ultime classi sovrascriveranno gli attributi della classe precedente con i propri lasciandogli inaterati gli altri. Show ha solo l'attributo: display: block; quindi andra a sovrascrivere l'attributo display: none; della classe precedente

.custom-alert ora però poichè sono contemporaneamente presenti sia.custom-alert che .show allora verra applicato anche lo stile .custom-alert.show che ha border: 2px e solid red;. Quindi vedremo la tooltip con bordo rosso spesso 2px. Se la div avesse avuto al posto di .show un'altro stile que.custom-alert.show non verrebe applicato.

Nello script abbiamo un esempio di programmazione orientata agli oggetti. Abbiamo una classe MyAlert che possiede due metodi show e hide che non fanno altro che aggiungere o rimuovere lo stile show dalla classList. Notare il modificatore static di questi metodi, questo permetterà di eseguire questi metodi sen dover prima istanziare n oggetto della classe MyAlert ma direttamente dalla classe così: MyAlert.Show('cust-alert').

Ora passiamo a descrivere gli esempi sulle pagine indici.

indTolTab.html:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 <title>Index Page with Tooltips</title>
  7 <style>
  8   a {
  9     color: black;
 10     text-decoration: none;
 11     transition: color 0.3s;
 12   }
 13 
 14   a:hover {
 15     color: red;
 16   }
 17 
 18   .tooltip {
 19     display: none;
 20     position: fixed; /* Cambiato in fixed */
 21     color: black;
 22     background-color: #f9f9f9;
 23     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 24     font-weight: bold;
 25     font-style: normal;
 26     font-size: 10pt;
 27     padding: 10px;
 28     border: 1px solid #000000;
 29     border-radius: 10px;
 30     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 31     z-index: 9999;
 32   }
 33   
 34   .grigio {
 35     display: inline-block;
 36         font-family: Arial, Helvetica, sans-serif;
 37     font-size: 14pt;
 38     color: #CCC;
 39     margin: 0px;
 40         margin-bottom: 0;
 41     font-weight: bold;
 42     font-style: italic; 
 43   }
 44 
 45   .grigio a {
 46   display: inline-block; /*  larghezza adattiva */
 47   }
 48 </style>
 49 </head>
 50 <body>
 51 
 52 <!-- Aggiungi più hyperlink qui -->
 53 
 54 <table width="800" border="0" align="center">
 55   <tbody>
 56     <tr>
 57       <td><p>&nbsp;</p>
 58         <table id="tabmenu" width="100" border="0" align="center" cellpadding="0" cellspacing="0">
 59         <tbody>
 60     <tr>
 61       <td><div class="grigio">
 62           <a href="#">- Cucina</a>
 63           <div class="tooltip">Tooltipcon messggio per Cucina</div>
 64         </div></td>
 65     </tr>
 66     <tr>
 67       <td><div class="grigio">
 68           <a href="#">- Officina</a>
 69           <div class="tooltip">Tooltip messggio per Officina questo un po più lungo</div>
 70         </div></td>
 71     </tr>
 72     <tr>
 73       <td><div class="grigio">
 74           <a href="#">- Volo</a>
 75           <div class="tooltip">Tooltip messggio per Volo</div>
 76         </div></td>
 77     </tr>
 78     <tr>
 79       <td><div class="grigio">
 80           - Vuota
 81           <!--<div class="tooltip">Tooltip messggio per Volo</div>-->
 82         </div></td>
 83     </tr>
 84   </tbody>
 85 </table>
 86 <p>&nbsp;</p>
 87 <p>&nbsp;</p>                                             
 88           </td>
 89     </tr>
 90   </tbody>
 91 </table>
 92 <script>
 93   document.addEventListener('DOMContentLoaded', function() {
 94         var tabella = document.getElementById('tabmenu');
 95         var rect = tabella.getBoundingClientRect(); 
 96           
 97     const grigioElements = document.querySelectorAll('.grigio');
 98                 grigioElements.forEach(function(grigio) {
 99                 const tooltip = grigio.querySelector('.tooltip');
100                 
101       grigio.addEventListener('mouseover', function() {    
102         tooltip.style.top = (rect.top + window.scrollY) + 'px';
103         tooltip.style.left = (rect.left + window.scrollX + rect.width) + 'px';
104                 tooltip.style.display = 'block';
105       });
106 
107       grigio.addEventListener('mouseout', function() {
108         tooltip.style.display = 'none';
109       });
110     });
111   });
112 </script>

aleScriptTog.js:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 <title>Index Page with Tooltips</title>
  7 <style>
  8   a {
  9     color: black;
 10     text-decoration: none;
 11     transition: color 0.3s;
 12   }
 13 
 14   a:hover {
 15     color: red;
 16   }
 17 
 18   .tooltip {
 19     display: none;
 20     position: fixed; /* Cambiato in fixed */
 21     color: black;
 22     background-color: #f9f9f9;
 23     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
 24     font-weight: bold;
 25     font-style: normal;
 26     font-size: 10pt;
 27     padding: 10px;
 28     border: 1px solid #000000;
 29     border-radius: 10px;
 30     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 31     z-index: 9999;
 32   }
 33   
 34   .grigio {
 35     display: inline-block;
 36     font-family: Arial, Helvetica, sans-serif;
 37     font-size: 14pt;
 38     color: #CCC;
 39     margin: 0px;
 40     margin-bottom: 0;
 41     font-weight: bold;
 42     font-style: italic; 
 43   }
 44 
 45   .grigio a {
 46   display: inline-block; /* larghezza adattiva */
 47   }
 48 </style>
 49 </head>
 50 <body>
 51 
 52 
 53 
 54 <!-- Aggiungi più hyperlink qui -->
 55 
 56 <table width="800" border="0" align="center">
 57   <tbody>
 58     <tr>
 59       <td><p>&nbsp;</p>
 60         <table id="tabmenu"width="200" border="0" align="center" cellpadding="0" cellspacing="0">
 61         <tbody>
 62     <tr>
 63       <td><div class="grigio">
 64           <a href="#">- Cucina</a>
 65           <div class="tooltip">Tooltip content for Cucina</div>
 66         </div></td>
 67     </tr>
 68     <tr>
 69       <td><div class="grigio">
 70           <a href="#">- Officina</a>
 71           <div class="tooltip">Tooltip content for Officina</div>
 72         </div></td>
 73     </tr>
 74     <tr>
 75       <td><div class="grigio">
 76           <a href="#">- Volo</a>
 77           <div class="tooltip">Tooltip content for Volo</div>
 78         </div></td>
 79     </tr>
 80     <tr>
 81       <td><div class="grigio">
 82           - Vuota
 83           <!--<div class="tooltip">Tooltip content for Volo</div>-->
 84         </div></td>
 85     </tr>
 86   </tbody>
 87 </table>
 88 <p>&nbsp;</p>
 89 <p>&nbsp;</p>                                             
 90           </td>
 91     </tr>
 92   </tbody>
 93 </table>
 94 <script>
 95   document.addEventListener('DOMContentLoaded', function() {
 96           
 97     const grigioElements = document.querySelectorAll('.grigio');
 98     grigioElements.forEach(function(grigio) {
 99         
100       const tooltip = grigio.querySelector('.tooltip');
101       var rect = grigio.getBoundingClientRect();
102       // Event listener per mostrare la tooltip
103       grigio.addEventListener('mouseover', function() {
104                           
105         // Calcolo della posizione della tooltip rispetto alla tabella
106         tooltip.style.top = (rect.top + window.scrollY) + 'px';
107         tooltip.style.left = (rect.left + window.scrollX + rect.width + 20) + 'px';
108         tooltip.style.display = 'block';
109       });
110 
111       // Event listener per nascondere la tooltip
112       grigio.addEventListener('mouseout', function() {
113         tooltip.style.display = 'none';
114       });
115     });
116   });
117 </script>

Iniziamo con i css:

A parte le altre impostazioni le cose importanti sono:

nello stile .tooltip è position: fixed; questo è lo stile da applicare alle tooltip ed è importante applicare questo attributo per far in modo che le tooltip siano inserite nel document, la pagina, in modo che abbiano il massimo spazio a disposizione. Se una tool tip fosse inserita dentro un'altro oggetto una div o una tabella che magari hanno dimensioni piccole e noi abbiamo un tooltip con frasi molto lunghe e quindi di larghezza maggiore dell'elemento che le contiene verrebbero costrette ha rinpiccolirsi con effetti non gradevoli. La posizione fixed ha le coordinate che si riferiscono alla pagina e non ad un eventuale contenitore. Nel caso delle pagine con indici di solito abiamo una classica tabella larga 800px che conterrà il tutto. Dentro si crea una tabella con tante righe quante sono le voci dell'eleco ed una colonna larga da 100 a 200 px al centro dell'altra. Entro ogni riga inseriremo una voce. Questa in realtà è costituita da una div con classe grigio che contiene un collegamento pertestuale <a></a> e un'altra div con classe tooltip. Questa seconda div è in realtà il tootip con classe .tooltip. il contenuto di questa div è il messaggio che verrà visualizzato dalla tooltip. L'altro aspettoo importante sono le display: inline-block; questo attributo fa si che sia la div grigio che il link <a> abbiano una larghezza uguale al loroo contenuto. Se non impostiamo questo parametro ad es. la div grigio avrà una larghezza di default che potrbbe essere di circa 200px molto più lunga del suo contenuto il link <a> che asua volta potrebbe avere una lunghezza maggiore della parola calda che contiene. Applicando questo parametro sia la div che il link si stringono alla lunghezza dei loro contenuti. Il posizionamento del tooltip ècosì più accurato.

Ora passiamo a descrivere lo <script> file aleScriptTog.js:

(95) document.addEventListener('DOMContentLoaded', function() { ... });: Questa riga del codice attiva una funzione quando il documento HTML è stato completamente caricato e analizzato dal browser.
(97) const grigioElements = document.querySelectorAll('.grigio');: Questa riga seleziona tutti gli elementi con classe .grigio nel documento HTML e li memorizza nella variabile grigioElements.
(98) grigioElements.forEach(function(grigio) { ... });: Questa riga esegue una funzione per ogni elemento selezionato con classe .grigio.
(100) const tooltip = grigio.querySelector('.tooltip');: Questa riga seleziona l'elemento che ha classe .tooltip all'interno di ciascun elemento .grigio e lo memorizza nella variabile toltip. in questo cso è la div interna (il nostro tooltip)
(101) var rect = grigio.getBoundingClientRect(); questo metodo ritorna le coordinate e le dimensioni della div con classe grigio
(103) grigio.addEventListener('mouseover', function() {;: Questa riga aggiunge un ascoltatore per l'evento "mouseover" a ciascun elemento .grigio. Quando si verifica l'evento "mouseover", la funzione associata viene eseguita.
(106) tooltip.style.top = (rect.top + window.scrollY + grigio.offsetHeight) + 'px';: Questa riga imposta la posizione verticale del tooltip in base alla posizione verticale dell'elemento <div tooltip> all'interno dell'elemento .grigio.
(107) tooltip.style.left = (rect.left + window.scrollX + rect.width + 20) + 'px';: Questa riga imposta la posizione orizzontale del tooltip in base alla posizione orizzontale dell'elemento <div tooltip> all'interno dell'elemento .grigio.
(108) tooltip.style.display = 'block'; Visualizza la tootip.
(111) grigio.addEventListener('mouseout', function() { ... });: Questa riga aggiunge un ascoltatore per l'evento "mouseout" a ciascun elemento .grigio. Quando si verifica l'evento "mouseoutr", la funzione associata viene eseguita.
(112) tooltip.style.display = 'none';: Nasconde il tooltip

Note:

Punto 2

Il metodo querySelectorAll restituisce un NodeList, che è un elenco di nodi, non un array associativo. Quindi, il termine "array" non è del tutto accurato qui. Il NodeList è simile a un array, ma non è esattamente lo stesso.

Punto 3

array.forEach(function(elemento) {
// Fai qualcosa con ogni elemento dell'array
});

grigio in grigioElements.forEach(function(grigio) { ... }) è solo un nome di variabile convenzionale che indica l'elemento corrente nel ciclo forEach. Il nome che viene assegnato al parametro della funzione forEach(in questo caso grigio) è completamente arbitrario e può essere qualsiasi cosa tu voglia. È una buona pratica scegliere un nome significativo che riflette il contenuto o il ruolo dell'elemento all'interno dell'iterazione, ma è comunque una convenzione di denominazione e non influenza la funzionalità del codice. potresti chiamare il parametro della funzione elemento, item, el, o qualsiasi altro nome che preferisci, e il codice funzionerebbe allo stesso modo.

Punto 4

querySelector('.tooltip'); seleziona la prima occorrenza di elemento che abbia la classe . tooltip.

Punto 5

const rect = grigio.getBoundingClientRect();: Questa riga restituisce un oggetto con le dimensioni e la posizione dell'elemento <div class="grigio"> rispetto alla finestra di visualizzazione (viewport). Questo oggetto contiene le seguenti informazioni:

top: la distanza dell'elemento <div> dal lato superiore della finestra di visualizzazione.

left: la distanza dell'elemento <div> dal lato sinistro della finestra di visualizzazione.

right: la distanza dell'elemento <div> dal lato destro della finestra di visualizzazione.

bottom: la distanza dell'elemento <div> dal lato inferiore della finestra di visualizzazione.

width: la larghezza dell'elemento <div>.

height: l'altezza dell'elemento <div>.

Punti 7 e 8

window.scrollX e window.scrollY sono la distanza in pixel della porzione di finestra eventualmente scrollata. Mi spiego se noi ad es. facciamo scorrere con la rotellina del mouse la pagina in basso una porzione più o meno lunga di pagina sconparirà in alto al di fuori della finestra, window.scrollY indica l'altezza in pixel della porzione scomparsa. grigio.offsetHeight indca l'altezza in pixel della div grigio.

Per il file indTolTab.html

Il codice è simile la differenza sta nel fatto che le misure prelevate con rect sono della tabella che contiene le div grigo e quindi le tooltip verrannoposizionate rispetto alla tabella e non alle singole div grigio.