Tooltip
TsgcHTMLComponent_Tooltip：为页面上的元素（例如工具栏按钮和表单字段）提供 Bootstrap 工具提示，由一组项目生成，每个项目指定一个目标和一段文本。工具提示在悬停和键盘焦点时打开，按 Esc 关闭，并适用于 htmx 换入的内容。适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Tooltip：为页面上的元素（例如工具栏按钮和表单字段）提供 Bootstrap 工具提示，由一组项目生成，每个项目指定一个目标和一段文本。工具提示在悬停和键盘焦点时打开，按 Esc 关闭，并适用于 htmx 换入的内容。适用于 Delphi、C++ Builder 和 .NET。
为每个工具提示添加一个项目，并在与目标相同的页面中提供 HTML。组件不渲染任何可见的标记：一个 JSON 块列出这些工具提示，页面加载时，一小段脚本会在每个目标元素上创建一个 Bootstrap 5 工具提示。
TsgcHTMLComponent_Tooltip，每个工具提示在 项目 中对应一个 TsgcHTMLTooltipItem
一个 JSON 块和一小段脚本，建立在 sgcHTML 引擎从内嵌资源提供的 Bootstrap 包之上，因此无需 CDN
Delphi, C++ Builder, .NET
组件上的 Placement、Trigger、Delay、Variant 和 MaxWidth 是每个项目的默认值，项目可以用自己的值覆盖其中任何一个。Add 一次调用即可设置目标和文本。
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; // 其 EditID 已设置
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // 在目标所在的页面中提供它
finally
oTip.Free;
end;
end;@* 父元素的属性是每个项目的默认值 *@
<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; // 其 EditID 已设置
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;让每位用户都能看到的简短提示，无论使用鼠标、键盘还是屏幕阅读器。
使用默认触发方式时，目标获得焦点后，键盘用户就会看到工具提示。无法获得焦点的目标，例如 span 或图标，会获得 tabindex="0"，在工具提示被释放时再次移除。
工具提示遵循 WCAG 2.2 成功标准 1.4.13。Esc 会关闭所有已打开的工具提示，而不移动指针或焦点；指针可以移到工具提示上而不会使其关闭；工具提示会一直保持打开，直到指针或焦点离开。它绝不会因计时器而关闭。
aria-describedby 把工具提示与获得焦点的元素关联起来，因此屏幕阅读器会在读出名称之后读出文本。目标原有的 aria-describedby 会保留在旁边，并在工具提示关闭时恢复。
自动、上、下、左或右。只要视口中放得下，工具提示就会保持所请求的一侧，只有该侧没有空间时才会移到另一侧。
Variant 选择 Bootstrap 的外观：浅色、深色或主题色（primary、secondary、success、danger、warning 或 info）。MaxWidth 接受 CSS 长度，留空则保持 200px。
纯文本会进行 HTML 编码，换行变成 <br>。Title 添加一行粗体的首行。当 HTML 为 True 时，文本是标记，会经过 sgcHTMLSanitizeHTML，保留格式和图像，并移除脚本、事件处理程序特性和不安全的 URL。
您最常用到的成员。
Add(aTarget, aText) 一次调用即可添加一个工具提示，Items.Add 返回一个项目，用来设置其余内容。每个项目都有 Target、TargetComponent、Text、Title 和 HTML，以及带有继承值的组件的五个选项：ttpInherit、tttInherit、Delay 为 -1、ttvInherit 和空的 MaxWidth。
一个 CSS 选择器，每个匹配的元素都会获得工具提示，因此一个项目可以描述某个类的所有按钮，例如 .toolbar .btn-danger 或 [name="email"]。没有目标的项目会被忽略。
链接同一页面中的一个组件，工具提示会加在其 id 等于该组件 id 属性的元素上：Edit 用 EditID，CheckBox 用 CheckBoxID，Popover 用 PopoverID，其他用其 ElementID。只有设置了该 id 时才会解析，否则项目使用 Target。
Trigger 让工具提示在悬停和焦点时（默认）、点击时、焦点时或手动打开。Delay 是工具提示打开前的毫秒数。对使用点击触发的按钮目标，按 Enter 和空格键可打开或关闭。
每次 htmx:afterSwap 和 htmx:load 之后，脚本都会再次扫描页面。与某个项目匹配的新元素会获得工具提示，其元素或 JSON 块已离开页面的工具提示会被释放。无论页面上有多少个组件，脚本每页只运行一次。
HTML 返回 JSON 块以及随后的工具提示脚本，如果没有任何项目同时具有目标和文本，则返回空字符串。请与 Bootstrap 包一起提供，例如放在 TsgcHTMLTemplate_Bootstrap 的 BodyContent 中。它在页面中的位置无关紧要，脚本会等待该包。
在 Razor 视图中，<sgc-tooltip> Tag Helper 渲染该组件，每个项目对应一个 <sgc-tooltip-item /> 子元素。父元素的特性是每个项目的默认值。工具提示不需要服务器事件，因此每次渲染都会创建组件。TargetComponent 没有对应的特性：请使用带有元素 id 的 target。
Demos\60.HTML\01.RunTime\29.Tour 是端口 8131 上的 sgc Cloud Console，这是一个 SaaS 仪表板，在工具栏按钮、统计卡片和表单字段上带有工具提示，旁边还有首次使用的产品导览。设计时、Lazarus 和 .NET 版本与之对应。