venerdì 9 agosto 2013

Inserire tooltip su h:selectOneMenu

Sfortunatamente il componente JSF h:selectOneMenu, che rappresenta a runtime la classica select HTML, non possiede nella implementazione nativa la proprietà title che serve a fornire un tooltip al passaggio del mouse sul valore selezionato.
Per ovviare a questa lacuna si può o utilizzare la p:selectOneMenu di primefaces (che di default consente di legare il tooltip all'itemDescription).
Per ovviare al problema senza inserire una nuova libreria ho trovato una soluzione un pò rozza  via javascript con questo metodo:


function aggiungiTooltip(idComponente){
  var options = document.getElementById(idComponente).options;
 for(var i = 0; i < options.length; i++) {
                options[i].title = options[i].value;
         }

    }



Questo metodo mi serviva in alcuni casi in cui nel value della combo avevo il testo esteso mentre nel text l'abbreviazione.

Se si vuole aggiungere il testo a video della combo come tooltip basta sostituire options[i].value con options[i].text. In Firefox funziona anche con la proprietà options[i].innerHTML , ma questa proprietà non funziona con IE 10.

L'ideale sarebbe richiamare il metodo all'onload della pagina, altrimenti si può collegare anche al metodo onmouseover del componente stesso.

Nessun commento:

Posta un commento