Quoi de plus normal que d'afficher par une info-bulle la raison pour laquelle un bouton (ou autre : case à cocher, ...) n'est pas cliquable ?

<input type="button" name="valider" disabled="disabled" value="Valider"></input>

Problématique

Et bien force est de constater le comportement n'est pas celui-attendu sous Firefox ! Ce dernier n'affiche pas l'info-bulle !

Vous pouvez le vérifier ci-dessous ou ici

Solution

En pensant d'abord aux utilisateurs, j'ai cherché une solution de contournement, et il s'avère qu'afficher par dessus le bouton une div transparente avec l'info-bulle corrige notre problème.

Voici le résultat :

<div class="zindex-tips-container">
<div class="zindex-tips-label" title="Vous n'avez pas les droits d'effectuer cette action"></div>
    <input type="button" name="valider" disabled="disabled" value="Valider"></input>
</div>

Et le css associé :

.zindex-tips-container {
    height: 100%;
    position: relative;
    width: 100%;
}
.zindex-tips-label {
    background: transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
}

Voici le résultat (lien) :

Il faut tout de même faire attention, car la superposition de la div bloque tous les événements, comme le clic avec la souris sur un bouton actif.

Maintenant faisons cela en Wicket :)

Implémentation dans Wicket

La mise en place est assez simple, il faut créer un behavior qui va ajouter le code html correspondant, et je vais donc directement vous donner le code correspondant :

public class ZindexTooltipBehavior extends AbstractBehavior {
 
	private StringResourceModel tooltip;
 
	public ZindexTooltipBehavior(StringResourceModel tooltip) {
		this.tooltip = tooltip;
	}
 
	@Override
	public void beforeRender(Component component) {
		super.beforeRender(component);
		Response response = component.getResponse();
		response.println("<div class=\"zindex-tips-container\">");
		response.println("<div class=\"zindex-tips-label\" title=\""+tooltip.getString()+"\"></div>");
 
	}
	@Override
	public void onRendered(Component component) {
		Response response = component.getResponse();
		super.onRendered(component);
		response.println("</div>");
	}
 
	public void setTooltip(StringResourceModel tooltip) {
		this.tooltip = tooltip;
	}
 
}

On remarque ici comment ajouter du contenu HTML avec les méthodes beforeRender et onRendered.

Ensuite, il faut ajouter le CSS correspondant dans la feuille de style de votre application ou directement dans le behavior grâce au code add(CSSPackageResource.getHeaderContribution(this.getClass(),"zindexTooltip.css")); .

Et voici un exemple d'utilisation sur une checkbox :

add(new Check<MonModel>("checkbox", model){
			@Override
			protected void onInitialize() {
				super.onInitialize();
				//On ajoute un zindex tooltip si la case est désactivée
				add(new ZindexTooltipBehavior(new StringResourceModel("button.action.forbidden.role")){
					@Override
					public boolean isEnabled(Component component) {
						return !isCheckboxEnabled();
					}
				});
			}
			@Override
			public boolean isEnabled() {
				return isCheckboxEnabled();
			}
 
			protected boolean isCheckboxEnabled() {
				return false; //Condition à implémenter
			}
		});

Voilà, c'est une astuce toute simple, mais qui montre la puissance d'utilisation des behaviors Wicket.

C'est nos utilisateurs qui vont être contents !