TsgcHTMLComponent_Tooltip: Bootstrap-tooltips op de elementen van de pagina, zoals werkbalkknoppen en formuliervelden, uit een lijst met items die elk een doel en een tekst noemen. De tooltips openen bij hover en bij toetsenbordfocus, sluiten met Esc en werken op inhoud die htmx invoegt, in Delphi, C++ Builder en .NET.
Voeg één item per tooltip toe en lever de HTML in dezelfde pagina als de doelen. Het component rendert geen zichtbare markup: een JSON-blok somt de tooltips op, en een klein script maakt bij het laden van de pagina een Bootstrap 5-tooltip op elk doelelement.
TsgcHTMLComponent_Tooltip, met één TsgcHTMLTooltipItem per tooltip in Items
Een JSON-blok en een klein script, bovenop de Bootstrap-bundel die de sgcHTML-engine uit een ingebedde resource levert, zodat geen CDN nodig is
Delphi, C++ Builder, .NET
Placement, Trigger, Delay, Variant en MaxWidth op het component zijn de standaardwaarden van elk item, en een item overschrijft elk ervan met een eigen waarde. Add stelt een doel en een tekst in met één aanroep.
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; // zijn EditID is ingesteld
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // lever het in de pagina van de doelen
finally
oTip.Free;
end;
end;@* De attributen van de ouder zijn de standaardwaarden van elk 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; // zijn EditID is ingesteld
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;Korte hints die elke gebruiker bereiken, met de muis, met het toetsenbord of met een schermlezer.
Met de standaardtrigger krijgt een toetsenbordgebruiker de tooltip wanneer het doel de focus krijgt. Doelen die geen focus kunnen krijgen, zoals een span of een pictogram, krijgen tabindex="0", dat weer wordt verwijderd wanneer de tooltip wordt opgeruimd.
De tooltips volgen WCAG 2.2-succescriterium 1.4.13. Esc sluit elke open tooltip zonder de aanwijzer of de focus te verplaatsen, de aanwijzer kan naar de tooltip bewegen zonder die te sluiten, en de tooltip blijft open tot de aanwijzer of de focus hem verlaat. Hij sluit nooit op een timer.
aria-describedby koppelt de tooltip aan het element met focus, zodat schermlezers de tekst na de naam voorlezen. Een aria-describedby dat het doel al had, blijft ernaast bestaan en wordt hersteld wanneer de tooltip sluit.
Auto, boven, onder, links of rechts. De tooltip houdt de gevraagde kant zolang die in de viewport past, en gaat alleen naar een andere kant als daar geen ruimte is.
Variant kiest de Bootstrap-stijl, licht, donker of een themakleur: primary, secondary, success, danger, warning of info. MaxWidth neemt een CSS-lengte, en leeg behoudt 200px.
Gewone tekst wordt HTML-gecodeerd en de regeleinden worden <br>. Title voegt een vette eerste regel toe. Met HTML True is de tekst markup die door sgcHTMLSanitizeHTML gaat, dat opmaak en afbeeldingen behoudt en scripts, eventhandlerattributen en onveilige URL's verwijdert.
De leden die je het vaakst gebruikt.
Add(aTarget, aText) voegt een tooltip toe met één aanroep, en Items.Add geeft een item terug om de rest in te stellen. Elk item heeft Doel, TargetComponent, Text, Title en HTML, plus de vijf opties van het component met een overervingswaarde: ttpInherit, tttInherit, Delay -1, ttvInherit en een lege MaxWidth.
Een CSS-selector, en elk element dat overeenkomt krijgt de tooltip, zodat één item alle knoppen van een klasse kan beschrijven, zoals .toolbar .btn-danger of [name="email"]. Een item zonder doel wordt weggelaten.
Koppelt een component van dezelfde pagina, en de tooltip komt op het element waarvan de id de id-eigenschap van dat component is: EditID voor een Edit, CheckBoxID voor een CheckBox, PopoverID voor een Popover, anders zijn ElementID. Hij wordt alleen opgelost als die id is ingesteld, anders gebruikt het item Doel.
Trigger opent de tooltip bij hover en focus (standaard), bij klik, bij focus of handmatig. Delay is het aantal milliseconden voordat een tooltip opent. Bij een knopdoel met de kliktrigger openen of sluiten Enter en spatiebalk hem.
Na elke htmx:afterSwap en htmx:load scant het script de pagina opnieuw. Nieuwe elementen die bij een item passen krijgen hun tooltip, en tooltips waarvan het element of het JSON-blok de pagina heeft verlaten worden opgeruimd. Het script draait één keer per pagina, hoeveel componenten de pagina ook bevat.
HTML geeft het JSON-blok gevolgd door het tooltipscript terug, of een lege string als geen enkel item zowel een doel als een tekst heeft. Lever het samen met de Bootstrap-bundel, bijvoorbeeld in de BodyContent van een TsgcHTMLTemplate_Bootstrap. De positie in de pagina maakt niet uit, en het script wacht op de bundel.
Houd tooltips kort: ze kunnen geen besturingselementen bevatten die een gebruiker moet bereiken. Gebruik voor interactieve inhoud een Popover of een Modal.
In een Razor-view rendert de Tag Helper <sgc-tooltip> het component, met één <sgc-tooltip-item />-kind per item. De attributen van de ouder zijn de standaardwaarden van elk item. De tooltips hebben geen serverevents nodig, dus het component wordt bij elke render gemaakt. Er is geen attribuut voor TargetComponent: gebruik target met de id van het element.
Demos\60.HTML\01.RunTime\29.Tour is de sgc Cloud Console op poort 8131, een SaaS-dashboard met tooltips op de werkbalkknoppen, de statistiekkaarten en de formuliervelden, naast een producttour voor het eerste gebruik. De designtime-, Lazarus- en .NET-versies spiegelen het.
| Online proberenBekijk het in de demo Rondleiding en tooltips, live draaiend op de eSeGeCe-demoserver. | Openen | |
| Online helpVolledige API-referentie en gebruikshandleiding voor dit component. | Openen | |
| Tour-componentEen begeleide producttour met een spotlight, in dezelfde demo samen met de tooltips getoond. | Openen | |
| Popover-componentEen tekstballon op een triggerelement voor inhoud die meer is dan een hint. | Openen | |
| Alle sgcHTML-componentenBlader door de volledige functiematrix van 80+ componenten. | Openen | |
| Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten. | Openen | |
| PrijzenSingle-, Team- en Site-licenties met volledige broncode. | Openen |