TsgcHTMLComponent_Tooltip : des infobulles Bootstrap sur les éléments de la page, comme les boutons de barre d'outils et les champs de formulaire, à partir d'une liste d'éléments qui nomment chacun une cible et un texte. Les infobulles s'ouvrent au survol et au focus clavier, se ferment avec Échap, et fonctionnent sur le contenu que htmx insère, en Delphi, C++ Builder et .NET.
Ajoutez un élément par infobulle et servez le HTML dans la même page que les cibles. Le composant ne rend aucun balisage visible : un bloc JSON liste les infobulles, et un petit script crée une infobulle Bootstrap 5 sur chaque élément cible au chargement de la page.
TsgcHTMLComponent_Tooltip, avec un TsgcHTMLTooltipItem par infobulle dans Items
Un bloc JSON et un petit script, par-dessus le bundle Bootstrap que le moteur sgcHTML sert depuis une ressource intégrée, donc aucun CDN n'est nécessaire
Delphi, C++ Builder, .NET
Placement, Trigger, Delay, Variant et MaxWidth sur le composant sont les valeurs par défaut de chaque élément, et un élément peut remplacer chacune d'elles par sa propre valeur. Add définit une cible et un texte en un seul appel.
uses
sgcHTML_Component_Tooltip;
var
oTip: TsgcHTMLComponent_Tooltip;
oItem: TsgcHTMLTooltipItem;
begin
oTip := TsgcHTMLComponent_Tooltip.Create(nil);
try
oTip.Placement := ttpBottom;
oTip.Delay := 100;
oTip.Add('#btnSave', 'Save the record');
oTip.Add('#btnExport', 'Export the grid to Excel');
oItem := oTip.Items.Add;
oItem.TargetComponent := edtEmail; // its EditID is set
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // serve it in the page of the targets
finally
oTip.Free;
end;
end;@* The parent attributes are the defaults of every item *@
<sgc-tooltip placement="bottom" delay="100" variant="dark" max-width="18rem">
<sgc-tooltip-item target="#btnSave" text="Save the record" />
<sgc-tooltip-item target="#email" title="Email" text="The invoice is sent to this address."
placement="right" trigger="focus" variant="light" />
<sgc-tooltip-item target=".btn-danger" text="<b>Cannot be undone</b>" html="true"
trigger="click" variant="danger" />
</sgc-tooltip>using esegece.sgcWebSockets;
var tip = new TsgcHTMLComponent_Tooltip();
tip.Placement = TsgcHTMLTooltipPlacement.ttpBottom;
tip.Delay = 100;
tip.Add("#btnSave", "Save the record");
tip.Add("#btnExport", "Export the grid to Excel");
var item = tip.Items.Add();
item.TargetComponent = edtEmail; // its EditID is set
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;De courts conseils qui atteignent chaque utilisateur, à la souris, au clavier ou avec un lecteur d'écran.
Avec le déclencheur par défaut, un utilisateur au clavier obtient l'infobulle lorsque la cible reçoit le focus. Les cibles qui ne peuvent pas prendre le focus, comme un span ou une icône, reçoivent tabindex="0", retiré de nouveau lorsque l'infobulle est détruite.
Les infobulles respectent le critère de succès 1.4.13 des WCAG 2.2. Échap ferme toutes les infobulles ouvertes sans déplacer le pointeur ni le focus, le pointeur peut passer sur l'infobulle sans la fermer, et l'infobulle reste ouverte tant que le pointeur ou le focus ne la quitte pas. Elle ne se ferme jamais sur un minuteur.
aria-describedby relie l'infobulle à l'élément ayant le focus, de sorte que les lecteurs d'écran lisent le texte après son nom. Un aria-describedby que la cible avait déjà est conservé à côté et restauré à la fermeture de l'infobulle.
Auto, haut, bas, gauche ou droite. L'infobulle garde le côté demandé chaque fois qu'elle tient dans la fenêtre d'affichage, et ne passe de l'autre côté que lorsque celui-ci n'a pas de place.
Variant choisit l'aspect Bootstrap, clair, sombre ou une couleur du thème : primary, secondary, success, danger, warning ou info. MaxWidth accepte une longueur CSS, et vide conserve 200px.
Le texte brut est encodé en HTML et ses sauts de ligne deviennent <br>. Title ajoute une première ligne en gras. Avec HTML à True, le texte est du balisage qui passe par sgcHTMLSanitizeHTML, lequel conserve la mise en forme et les images et supprime les scripts, les attributs de gestionnaires d'événements et les URL dangereuses.
Les membres que vous utiliserez le plus souvent.
Add(aTarget, aText) ajoute une infobulle en un seul appel, et Items.Add renvoie un élément dont on définit le reste. Chaque élément a Target, TargetComponent, Text, Title et HTML, plus les cinq options du composant avec une valeur d'héritage : ttpInherit, tttInherit, Delay -1, ttvInherit et un MaxWidth vide.
Un sélecteur CSS, et chaque élément correspondant reçoit l'infobulle, de sorte qu'un seul élément peut décrire tous les boutons d'une classe, comme .toolbar .btn-danger ou [name="email"]. Un élément sans cible est ignoré.
Lie un composant de la même page, et l'infobulle se place sur l'élément dont l'id est la propriété id de ce composant : EditID pour un Edit, CheckBoxID pour une CheckBox, PopoverID pour un Popover, sinon son ElementID. Elle ne se résout que lorsque cet id est défini ; sinon l'élément utilise Target.
Trigger ouvre l'infobulle au survol et au focus (par défaut), au clic, au focus, ou manuellement. Delay est le nombre de millisecondes avant l'ouverture d'une infobulle. Sur une cible bouton avec le déclencheur au clic, Entrée et Espace l'ouvrent ou la ferment.
Après chaque htmx:afterSwap et htmx:load, le script analyse de nouveau la page. Les nouveaux éléments qui correspondent à un élément de la liste reçoivent leur infobulle, et les infobulles dont l'élément ou le bloc JSON a quitté la page sont détruites. Le script ne s'exécute qu'une fois par page, quel que soit le nombre de composants de la page.
HTML renvoie le bloc JSON suivi du script des infobulles, ou une chaîne vide lorsqu'aucun élément n'a à la fois une cible et un texte. Servez-le avec le bundle Bootstrap, par exemple dans le BodyContent d'un TsgcHTMLTemplate_Bootstrap. Sa position dans la page n'a pas d'importance, et le script attend le bundle.
Gardez les infobulles courtes : elles ne peuvent pas contenir de contrôles que l'utilisateur doit atteindre. Pour un contenu interactif, utilisez un Popover ou un Modal.
Dans une vue Razor, le Tag Helper <sgc-tooltip> rend le composant, avec un enfant <sgc-tooltip-item /> par élément. Les attributs du parent sont les valeurs par défaut de chaque élément. Les infobulles n'ont besoin d'aucun événement serveur, donc le composant est créé à chaque rendu. Il n'existe pas d'attribut pour TargetComponent : utilisez target avec l'id de l'élément.
Demos\60.HTML\01.RunTime\29.Tour est la sgc Cloud Console sur le port 8131, un tableau de bord SaaS avec des infobulles sur les boutons de la barre d'outils, les cartes de statistiques et les champs de formulaire, à côté d'une visite guidée du produit au premier lancement. Les versions design time, Lazarus et .NET en sont le miroir.
| Essayer en ligneVoyez-le dans la démo Visite guidée & infobulles, en fonctionnement direct sur le serveur de démos d'eSeGeCe. | Ouvrir | |
| Aide en ligneRéférence API complète et guide d'utilisation pour ce composant. | Ouvrir | |
| Composant TourUne visite guidée du produit avec un projecteur, présentée avec les infobulles dans la même démo. | Ouvrir | |
| Composant PopoverUne bulle sur un élément déclencheur pour un contenu plus riche qu'un simple conseil. | Ouvrir | |
| Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 80 composants. | Ouvrir | |
| Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML. | Ouvrir | |
| TarifsLicences Single, Team et Site avec code source complet. | Ouvrir |