TsgcHTMLComponent_Tooltip: Bootstrap tooltips on the elements of the page, such as toolbar buttons and form fields, from a list of items that each name a target and a text. The tooltips open on hover and on keyboard focus, close with Esc, and work on content that htmx swaps in, in Delphi, C++ Builder and .NET.
Add one item per tooltip and serve the HTML in the same page as the targets. The component renders no visible markup: a JSON block lists the tooltips, and a small script creates a Bootstrap 5 tooltip on each target element when the page loads.
TsgcHTMLComponent_Tooltip, with one TsgcHTMLTooltipItem per tooltip in Items
A JSON block and a small script, on top of the Bootstrap bundle that the sgcHTML engine serves from an embedded resource, so no CDN is needed
Delphi, C++ Builder, .NET
Placement, Trigger, Delay, Variant and MaxWidth on the component are the defaults of every item, and an item overrides any of them with its own value. Add sets a target and a text in one call.
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;Short hints that reach every user, with the mouse, with the keyboard or with a screen reader.
With the default trigger, a keyboard user gets the tooltip when the target receives the focus. Targets that cannot take the focus, such as a span or an icon, receive tabindex="0", removed again when the tooltip is disposed.
The tooltips follow WCAG 2.2 success criterion 1.4.13. Esc closes every open tooltip without moving the pointer or the focus, the pointer can move onto the tooltip without closing it, and the tooltip stays open until the pointer or the focus leaves. It never closes on a timer.
aria-describedby links the tooltip to the focused element, so screen readers read the text after its name. An aria-describedby the target already had is kept next to it and restored when the tooltip closes.
Auto, top, bottom, left or right. The tooltip keeps the requested side whenever it fits in the viewport, and only moves to another side when that one has no room.
Variant picks the Bootstrap look, light, dark or a theme colour: primary, secondary, success, danger, warning or info. MaxWidth takes a CSS length, and empty keeps 200px.
Plain text is HTML encoded and its line breaks become <br>. Title adds a bold first line. With HTML True the text is markup that goes through sgcHTMLSanitizeHTML, which keeps formatting and images and removes scripts, event handler attributes and unsafe URLs.
The members you reach for most often.
Add(aTarget, aText) adds a tooltip in one call, and Items.Add returns an item to set the rest. Each item has Target, TargetComponent, Text, Title and HTML, plus the five options of the component with an inherit value: ttpInherit, tttInherit, Delay -1, ttvInherit and an empty MaxWidth.
A CSS selector, and every element that matches gets the tooltip, so one item can describe all the buttons of a class, such as .toolbar .btn-danger or [name="email"]. An item without a target is left out.
Links a component of the same page, and the tooltip goes on the element whose id is the id property of that component: EditID for an Edit, CheckBoxID for a CheckBox, PopoverID for a Popover, else its ElementID. It resolves only when that id is set; otherwise the item uses Target.
Trigger opens the tooltip on hover and focus (the default), on click, on focus, or manually. Delay is the number of milliseconds before a tooltip opens. On a button target with the click trigger, Enter and Space open or close it.
After every htmx:afterSwap and htmx:load the script scans the page again. New elements that match an item get their tooltip, and tooltips whose element or JSON block left the page are disposed. The script runs once per page, however many components the page holds.
HTML returns the JSON block followed by the tooltip script, or an empty string when no item has both a target and a text. Serve it with the Bootstrap bundle, for instance in the BodyContent of a TsgcHTMLTemplate_Bootstrap. Its position in the page does not matter, and the script waits for the bundle.
Keep tooltips short: they cannot hold controls a user must reach. For interactive content, use a Popover or a Modal.
In a Razor view, the <sgc-tooltip> Tag Helper renders the component, with one <sgc-tooltip-item /> child per item. The attributes of the parent are the defaults of every item. The tooltips need no server events, so the component is created for each render. There is no attribute for TargetComponent: use target with the id of the element.
Demos\60.HTML\01.RunTime\29.Tour is the sgc Cloud Console on port 8131, a SaaS dashboard with tooltips on the toolbar buttons, the stat cards and the form fields, next to a first-run product tour. The design time, Lazarus and .NET versions mirror it.
| Try It OnlineSee it in the Tour & Tooltips demo, running live on the eSeGeCe demo server. | Open | |
| Online HelpFull API reference and usage guide for this component. | Open | |
| Tour ComponentA guided product tour with a spotlight, shown with the tooltips in the same demo. | Open | |
| Popover ComponentA bubble on a trigger element for content with more than a hint. | Open | |
| All sgcHTML ComponentsBrowse the full feature matrix of 80+ components. | Open | |
| Download Free TrialThe 30-day trial ships the 60.HTML demo projects. | Open | |
| PricingSingle, Team and Site licenses with full source code. | Open |