Version de développement

Cette documentation décrit la version « next » (develop), non encore publiée. Pour la version stable, basculez sur « v5 » dans l'en-tête.

Composants UI

Info-bulles intelligentes

Afficher une info-bulle seulement quand un texte est tronqué, avec l'option only_on_overflow de frappe.ui.tooltip.

Info-bulles intelligentes

Une info-bulle « intelligente » s'affiche seulement quand le texte de l'élément est coupé : points de suspension ou limite de lignes. Si le texte tient en entier, rien ne s'affiche au survol.

Le bureau utilise ce comportement pour le nom des icônes. Un nom court ne montre pas d'info-bulle. Un nom tronqué montre le nom complet.

      
flowchart LR
  A[Survol ou focus] --> B{Le texte est-il tronqué ?}
  B -- Oui --> C[Info-bulle avec le texte complet]
  B -- Non --> D[Aucune info-bulle]

Utiliser l'option dans votre code

Passez only_on_overflow: true à frappe.ui.tooltip. Sans text, l'info-bulle reprend le texte de l'élément au moment de l'affichage.

frappe.ui.tooltip($cell, { only_on_overflow: true });

Pour de nombreux éléments (une liste, une grille d'icônes), utilisez la délégation. Un seul gestionnaire sur le conteneur sert tous les éléments qui correspondent au sélecteur :

const stop = frappe.ui.Tooltip.delegate(page.body, ".icon-title", {
    only_on_overflow: true,
    side: "bottom",
    delay: 150,
});
// stop() retire le gestionnaire

Options

Option	Défaut	Rôle
`text`	texte de l'élément	Texte de l'info-bulle. Affiché comme texte, jamais comme HTML.
`only_on_overflow`	`false`	Affiche l'info-bulle seulement si le texte est tronqué.
`side`	`top`	Côté préféré : `top`, `right`, `bottom`, `left`.
`align`	`center`	Alignement : `start`, `center`, `end`.
`delay`	`500`	Délai au survol, en millisecondes. Au focus clavier, l'info-bulle s'affiche tout de suite.
`shortcut`	—	Raccourci affiché après le texte, par exemple `"ctrl+b"`. Affichage seul.
`text_align`	`center`	`start` aligne un texte sur plusieurs lignes à gauche.
`class`	—	Classe CSS en plus. `es-tooltip--plain` retire la flèche.

L'info-bulle se ferme quand le pointeur quitte l'élément, à la perte du focus, avec Échap ou au clic sur l'élément. Pendant l'affichage, l'élément porte aria-describedby : les lecteurs d'écran lisent aussi le texte.