Règles CCS pour afficher les noms techniques des champs et des dicos dans un formulaire

Edit me

Introduction

En phase de conception, il peut être pratique d’avoir un accès facile aux noms techniques des champs et aux codes des dicos directement sur les formulaires affichées.

Cet article propose des règles CSS pour atteindre cet objectif.

Afficher le nom des champs au passage de la souris

Règle CSS

[data-field]:hover:before {
   content: attr(data-field);
   font-weight: bold;
   position: relative;
   background: lightgray;
   padding: 0 4px;
   border: 2px solid grey;
   border-radius: 4px;
   top: 25px;
   z-index: 1000;
   opacity: 0.5;
}

Cela fonctionne aussi avec les composants matrix

Résultat

Le nom technique d’un champ apparaît lorsque la souris passe sur son libellé.

Nom des champs en hover

Afficher le nom des champs en permanence

Règle CSS

[data-field]:before {
   content: attr(data-field);
   font-weight: bold;
   position: relative;
   background: lightgray;
   padding: 0 4px;
   border: 2px solid grey;
   border-radius: 4px;
   top: 25px;
   z-index: 1000;
   opacity: 0.5;
}

Résultat

Les noms techniques des champs apparaîssent en permanence.

Nom des champs en permanence

Exemple avec un widgetmatrix :

Nom des champs en permanence

Afficher le code des items de dico au passage de la souris

Règle CSS

[data-code]:hover:before {
   content: attr(data-code);
   font-weight: bold;
   position: relative;
   background: lightgray;
   padding: 0 4px;
   border: 2px solid grey;
   border-radius: 4px;
   top: 25px;
   z-index: 1000;
   opacity: 0.5;
}

Résultat

Le code d’un item de dico apparaît lorsque la souris passe sur son libellé.

Code des items des dicos en hover

Afficher le code des items de dico en permanence

Règle CSS

[data-code]:before {
  content: attr(data-code);
  font-weight: bold;
  position: relative;
  background: lightgray;
  padding: 0 4px;
  border: 2px solid grey;
  border-radius: 4px;
  top: 25px;
  z-index: 1000;
  opacity: 0.5;
}

Résultat

Les codes des items de dicos apparaîssent en permanence.

Code des items des dicos en permanence