Affichage et masquage d'une "aide simple" sur un attribut

Support
1

Bonjour,

Est-ce qu’il est possible d’afficher et de masquer une aide simple d’un attribut via :

  • Un clic sur le ? pour afficher l’aide simple
  • Un clic autre part pour masquer l’aide (Comme en version 4.0)

Actuellement, en 5.3 et 6.2 il faut :

  • Un clic sur le ? pour afficher l’aide simple
  • Un second clic sur le ?
  • Un clic autre part pour masquer l’aide

D’un point de vue, ergo, on minimise le nombre de clic.

Cordialement,

3

Relance sur ce sujet.

Sébastien

4

Bonjour Sébastien,

En effet en 6.2 il y a bien ce besoin d’un clic supplémentaire sur le “?” afin de pouvoir fermer la popup d’aide.

Cela a été corrigé sur la 6.3 (cf vidéo d’exemple)

5

Pour préciser, c’est un composant de bootstrap qu’on a dû corriger depuis la V4.

Entre la V4 et les versions suivantes, on est passé d’un tooltip :

  • "data-trigger": "toggle"

à un mode

  • "data-trigger": "focus" : s’ouvre sur focus
  • "data-delay": 200 : attendre 200ms avant de le fermer
  • et un on click qui gère le “toggle”

Le bug étant qu’une ancre ou un bouton dans l’aide ne pouvait pas être exécutée.
Le tooltip en mode “toggle” se ferme avant que l’action n’ait le temps de se propager.
On a tout essayé et seule cette configuration permet de traiter tous les cas d’usage.

this.buttonHelp = function(name, help, title, btn) {
	if (!help)
		return "";
	// not html => convert \n with <br>
	if (!help.startsWith("<"))
		help = help.replace(/\n/g,"<br/>");
	var h = self.spanIcon({ name: "help_"+name, icon: "fas/question-circle" }).addClass("help");
	if (btn) {
		btn.append(h);
		h = btn;
	}
	if (help.length>300)
		h.click(function(e) {
			e.stopPropagation();
			self.dialog({ title: title, content: $.getSafeHTML(help), closeable: true });
		});
	else
		h.click(function(e) {
			e.stopPropagation();
			$(this).popover("toggle");
		})
		.attr({
			tabindex: 0,
			"data-toggle": "popover",
			"data-trigger": "focus",
			"data-delay": 200, // close after inner events (href, button...)
			"data-container": "body",
			"data-placement": "bottom",
			"data-html": true,
			"data-title": $("<span/>").htmlSafe(title).html(),
			"data-content": $("<span/>").htmlSafe(help).html()
		});
	return h;
};
1 Like
6

Merci, c est disponible sur la 6.2 ?

Cordialement,

7

Ca n’a pas changé depuis la V5, sauf le temps de corriger le pb de trigger interne bouton ou href.

  • Tant que bouton “?” a le focus le tooltip est visible, il ne fonctionne plus en “toggle”.
  • Tout click en dehors ferme le tooltip après 200ms pour laisser passer les clicks internes au tooltip (bouton / href)
  • c’est RGAA / le focus est plus simple pour l’accès clavier / TAB

Il n’a jamais été pas nécessaire de cliquer 3 fois.

10

On me dit que ça peut se produire en 6.2 mais pas en 6.3.
Le code du buttonHelp est strictement identique donc on va creuser la question : ça doit venir de la version de bootstrap qui est légèrement différente.

  • Bootstrap v5.3.3 en 6.2
  • Bootstrap v5.3.7 en 6.3
13

Merci pour votre aide, on attend votre retour.

15

Bonjour,

Avez-vous des nouvelles à ce sujet ?

16

Cf. ✅ v6.2 | Simplicité Documentation, la version de Bootstrap a été upgradée sur sa version à jour (5.3.8) dans la révision SImplicité 6.2.18 (releaseé le 31/10)

1 Like
17

Excellente nouvelle, merci !