TsgcHTMLComponent_Tooltip: Bootstrap-Tooltips auf den Elementen der Seite, etwa Symbolleisten-Schaltflächen und Formularfeldern, aus einer Liste von Einträgen, die jeweils ein Ziel und einen Text benennen. Die Tooltips öffnen sich beim Überfahren und bei Tastaturfokus, schließen sich mit Esc und funktionieren auf Inhalt, den htmx einfügt, in Delphi, C++ Builder und .NET.
Fügen Sie pro Tooltip einen Eintrag hinzu und liefern Sie das HTML in derselben Seite wie die Ziele aus. Die Komponente rendert kein sichtbares Markup: Ein JSON-Block listet die Tooltips auf, und ein kleines Skript erstellt beim Laden der Seite auf jedem Zielelement einen Bootstrap-5-Tooltip.
TsgcHTMLComponent_Tooltip mit einem TsgcHTMLTooltipItem pro Tooltip in Elemente
Ein JSON-Block und ein kleines Skript, zusätzlich zum Bootstrap-Bundle, das die sgcHTML-Engine aus einer eingebetteten Ressource ausliefert, sodass kein CDN nötig ist
Delphi, C++ Builder, .NET
Placement, Trigger, Delay, Variant und MaxWidth an der Komponente sind die Standardwerte jedes Eintrags, und ein Eintrag überschreibt jeden davon mit einem eigenen Wert. Add setzt ein Ziel und einen Text in einem Aufruf.
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; // seine EditID ist gesetzt
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // in der Seite der Ziele ausliefern
finally
oTip.Free;
end;
end;@* Die Attribute des Elternelements sind die Standardwerte jedes Eintrags *@
<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; // seine EditID ist gesetzt
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;Kurze Hinweise, die jeden Benutzer erreichen, mit der Maus, mit der Tastatur oder mit einem Screenreader.
Mit dem Standard-Trigger erhält ein Tastaturbenutzer den Tooltip, wenn das Ziel den Fokus bekommt. Ziele, die keinen Fokus aufnehmen können, etwa ein Span oder ein Symbol, erhalten tabindex="0", das beim Entfernen des Tooltips wieder gelöscht wird.
Die Tooltips folgen dem WCAG-2.2-Erfolgskriterium 1.4.13. Esc schließt jeden offenen Tooltip, ohne den Zeiger oder den Fokus zu bewegen, der Zeiger kann auf den Tooltip wechseln, ohne ihn zu schließen, und der Tooltip bleibt offen, bis der Zeiger oder der Fokus ihn verlässt. Er schließt sich nie per Timer.
aria-describedby verknüpft den Tooltip mit dem fokussierten Element, sodass Screenreader den Text nach seinem Namen vorlesen. Ein aria-describedby, das das Ziel bereits hatte, bleibt daneben erhalten und wird wiederhergestellt, wenn der Tooltip schließt.
Auto, oben, unten, links oder rechts. Der Tooltip behält die gewünschte Seite, sofern sie in den Viewport passt, und wechselt nur dann auf eine andere Seite, wenn dort kein Platz ist.
Variant wählt den Bootstrap-Stil, hell, dunkel oder eine Themenfarbe: primary, secondary, success, danger, warning oder info. MaxWidth nimmt eine CSS-Länge, und leer behält 200px.
Einfacher Text wird HTML-kodiert, und seine Zeilenumbrüche werden zu <br>. Title fügt eine fette erste Zeile hinzu. Mit HTML True ist der Text Markup, das durch sgcHTMLSanitizeHTML läuft, das Formatierung und Bilder behält und Skripte, Ereignis-Handler-Attribute und unsichere URLs entfernt.
Die Member, zu denen Sie am häufigsten greifen.
Add(aTarget, aText) fügt einen Tooltip in einem Aufruf hinzu, und Items.Add gibt einen Eintrag zurück, um den Rest zu setzen. Jeder Eintrag hat Ziel, TargetComponent, Text, Title und HTML, dazu die fünf Optionen der Komponente mit einem Erbwert: ttpInherit, tttInherit, Delay -1, ttvInherit und ein leeres MaxWidth.
Ein CSS-Selektor, und jedes passende Element erhält den Tooltip, sodass ein Eintrag alle Schaltflächen einer Klasse beschreiben kann, etwa .toolbar .btn-danger oder [name="email"]. Ein Eintrag ohne Ziel wird ausgelassen.
Verknüpft eine Komponente derselben Seite, und der Tooltip kommt auf das Element, dessen ID die ID-Eigenschaft dieser Komponente ist: EditID für ein Edit, CheckBoxID für eine CheckBox, PopoverID für ein Popover, sonst ihre ElementID. Er löst sich nur auf, wenn diese ID gesetzt ist, andernfalls verwendet der Eintrag Ziel.
Trigger öffnet den Tooltip beim Überfahren und bei Fokus (Standard), bei Klick, bei Fokus oder manuell. Delay ist die Anzahl der Millisekunden, bevor sich ein Tooltip öffnet. Bei einem Schaltflächenziel mit Klick-Trigger öffnen oder schließen Eingabetaste und Leertaste ihn.
Nach jedem htmx:afterSwap und htmx:load durchsucht das Skript die Seite erneut. Neue Elemente, die zu einem Eintrag passen, erhalten ihren Tooltip, und Tooltips, deren Element oder JSON-Block die Seite verlassen hat, werden entfernt. Das Skript läuft einmal pro Seite, egal wie viele Komponenten die Seite enthält.
HTML gibt den JSON-Block gefolgt vom Tooltip-Skript zurück, oder eine leere Zeichenfolge, wenn kein Eintrag Ziel und Text hat. Liefern Sie es mit dem Bootstrap-Bundle aus, zum Beispiel im BodyContent eines TsgcHTMLTemplate_Bootstrap. Seine Position in der Seite spielt keine Rolle, und das Skript wartet auf das Bundle.
Halten Sie Tooltips kurz: Sie können keine Steuerelemente enthalten, die ein Benutzer erreichen muss. Verwenden Sie für interaktiven Inhalt ein Popover oder ein Modal.
In einer Razor-View rendert der Tag Helper <sgc-tooltip> die Komponente, mit einem <sgc-tooltip-item />-Kind pro Eintrag. Die Attribute des Elternelements sind die Standardwerte jedes Eintrags. Die Tooltips brauchen keine Server-Ereignisse, daher wird die Komponente für jedes Rendern erstellt. Für TargetComponent gibt es kein Attribut: Verwenden Sie target mit der ID des Elements.
Demos\60.HTML\01.RunTime\29.Tour ist die sgc Cloud Console auf Port 8131, ein SaaS-Dashboard mit Tooltips auf den Symbolleisten-Schaltflächen, den Statistikkarten und den Formularfeldern, neben einer Produkttour für den ersten Start. Die Designtime-, Lazarus- und .NET-Versionen spiegeln sie.
| Online ausprobierenSehen Sie es in der Demo Tour & Tooltips, live auf dem eSeGeCe-Demoserver. | Öffnen | |
| Online-HilfeVollständige API-Referenz und Verwendungshandbuch für diese Komponente. | Öffnen | |
| Tour-KomponenteEine geführte Produkttour mit Spotlight, in derselben Demo zusammen mit den Tooltips gezeigt. | Öffnen | |
| Popover-KomponenteEine Sprechblase an einem Auslöserelement für Inhalt, der mehr als ein Hinweis ist. | Öffnen | |
| Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 80 Komponenten. | Öffnen | |
| Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte. | Öffnen | |
| PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode. | Öffnen |