TsgcHTMLComponent_Tooltip: tooltip Bootstrap sugli elementi della pagina, come pulsanti della barra degli strumenti e campi dei moduli, a partire da un elenco di elementi che nominano ciascuno una destinazione e un testo. I tooltip si aprono al passaggio del mouse e con il focus da tastiera, si chiudono con Esc e funzionano sui contenuti che htmx sostituisce, in Delphi, C++ Builder e .NET.
Aggiungi un elemento per tooltip e servi l'HTML nella stessa pagina delle destinazioni. Il componente non renderizza markup visibile: un blocco JSON elenca i tooltip e un piccolo script crea un tooltip Bootstrap 5 su ogni elemento di destinazione quando la pagina si carica.
TsgcHTMLComponent_Tooltip, con un TsgcHTMLTooltipItem per tooltip in Items
Un blocco JSON e un piccolo script, sopra il bundle Bootstrap che il motore sgcHTML serve da una risorsa incorporata, quindi non serve alcun CDN
Delphi, C++ Builder, .NET
Placement, Trigger, Delay, Variant e MaxWidth sul componente sono i valori predefiniti di ogni elemento, e un elemento può sostituirne uno qualsiasi con un proprio valore. Add imposta una destinazione e un testo in una sola chiamata.
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; // il suo EditID è impostato
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // servilo nella pagina delle destinazioni
finally
oTip.Free;
end;
end;@* Gli attributi del genitore sono i valori predefiniti di ogni elemento *@
<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; // il suo EditID è impostato
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;Brevi suggerimenti che raggiungono ogni utente, con il mouse, con la tastiera o con uno screen reader.
Con il trigger predefinito, un utente da tastiera ottiene il tooltip quando la destinazione riceve il focus. Le destinazioni che non possono ricevere il focus, come uno span o un'icona, ricevono tabindex="0", rimosso di nuovo quando il tooltip viene eliminato.
I tooltip seguono il criterio di successo 1.4.13 delle WCAG 2.2. Esc chiude ogni tooltip aperto senza spostare il puntatore o il focus, il puntatore può spostarsi sul tooltip senza chiuderlo e il tooltip resta aperto finché il puntatore o il focus non lo lasciano. Non si chiude mai per un timer.
aria-describedby collega il tooltip all'elemento con il focus, così gli screen reader leggono il testo dopo il suo nome. Un aria-describedby che la destinazione aveva già viene mantenuto accanto ad esso e ripristinato quando il tooltip si chiude.
Auto, sopra, sotto, sinistra o destra. Il tooltip mantiene il lato richiesto ogni volta che entra nel viewport e si sposta su un altro lato solo quando quello non ha spazio.
Variant sceglie l'aspetto Bootstrap, chiaro, scuro o un colore del tema: primary, secondary, success, danger, warning o info. MaxWidth accetta una lunghezza CSS, e vuoto mantiene 200px.
Il testo semplice viene codificato come HTML e i suoi a capo diventano <br>. Title aggiunge una prima riga in grassetto. Con HTML a True il testo è markup che passa per sgcHTMLSanitizeHTML, che mantiene formattazione e immagini e rimuove script, attributi dei gestori di eventi e URL non sicuri.
I membri che usi più spesso.
Add(aTarget, aText) aggiunge un tooltip in una sola chiamata, e Items.Add restituisce un elemento per impostare il resto. Ogni elemento ha Target, TargetComponent, Text, Title e HTML, più le cinque opzioni del componente con un valore di ereditarietà: ttpInherit, tttInherit, Delay -1, ttvInherit e un MaxWidth vuoto.
Un selettore CSS, e ogni elemento che corrisponde riceve il tooltip, quindi un solo elemento può descrivere tutti i pulsanti di una classe, come .toolbar .btn-danger o [name="email"]. Un elemento senza destinazione viene omesso.
Collega un componente della stessa pagina, e il tooltip va sull'elemento il cui id è la proprietà id di quel componente: EditID per un Edit, CheckBoxID per un CheckBox, PopoverID per un Popover, altrimenti il suo ElementID. Si risolve solo quando quell'id è impostato; altrimenti l'elemento usa Target.
Trigger apre il tooltip al passaggio del mouse e con il focus (il predefinito), al clic, con il focus o manualmente. Delay è il numero di millisecondi prima che un tooltip si apra. Su una destinazione pulsante con il trigger al clic, Invio e Spazio lo aprono o lo chiudono.
Dopo ogni htmx:afterSwap e htmx:load lo script analizza di nuovo la pagina. I nuovi elementi che corrispondono a un elemento ricevono il loro tooltip, e i tooltip il cui elemento o blocco JSON ha lasciato la pagina vengono eliminati. Lo script viene eseguito una volta per pagina, per quanti componenti la pagina contenga.
HTML restituisce il blocco JSON seguito dallo script del tooltip, o una stringa vuota quando nessun elemento ha sia destinazione sia testo. Servilo con il bundle Bootstrap, per esempio nel BodyContent di un TsgcHTMLTemplate_Bootstrap. La sua posizione nella pagina non conta, e lo script attende il bundle.
Mantieni i tooltip brevi: non possono contenere controlli che l'utente deve raggiungere. Per contenuti interattivi, usa un Popover o un Modal.
In una vista Razor, il Tag Helper <sgc-tooltip> renderizza il componente, con un figlio <sgc-tooltip-item /> per elemento. Gli attributi del genitore sono i valori predefiniti di ogni elemento. I tooltip non richiedono eventi server, quindi il componente viene creato a ogni rendering. Non esiste un attributo per TargetComponent: usa target con l'id dell'elemento.
Demos\60.HTML\01.RunTime\29.Tour è la sgc Cloud Console sulla porta 8131, una dashboard SaaS con tooltip sui pulsanti della barra degli strumenti, sulle schede statistiche e sui campi dei moduli, accanto a un tour del prodotto al primo avvio. Le versioni design time, Lazarus e .NET lo replicano.
| Provalo onlineGuardalo nella demo Tour e tooltip, in esecuzione dal vivo sul server demo di eSeGeCe. | Apri | |
| Guida in lineaRiferimento API completo e guida all'uso di questo componente. | Apri | |
| Componente TourUn tour guidato del prodotto con spotlight, mostrato insieme ai tooltip nella stessa demo. | Apri | |
| Componente PopoverUn fumetto su un elemento attivatore per contenuti che vanno oltre un suggerimento. | Apri | |
| Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 80 componenti. | Apri | |
| Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML. | Apri | |
| PrezziLicenze Single, Team e Site con codice sorgente completo. | Apri |