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와 Space 키로 열고 닫습니다.
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 버전도 같은 구성입니다.
| 온라인으로 체험eSeGeCe 데모 서버에서 실시간으로 실행되는 투어 및 툴팁 데모로 확인해 보세요. | 열기 | |
| 온라인 도움말이 컴포넌트의 전체 API 레퍼런스와 사용 가이드입니다. | 열기 | |
| Tour 컴포넌트스포트라이트가 있는 안내형 제품 둘러보기로, 같은 데모에서 툴팁과 함께 표시됩니다. | 열기 | |
| Popover 컴포넌트힌트보다 많은 콘텐츠를 담는, 트리거 요소에 붙는 말풍선입니다. | 열기 | |
| 모든 sgcHTML 컴포넌트80개 이상 컴포넌트의 전체 기능 매트릭스를 살펴보십시오. | 열기 | |
| 무료 체험판 다운로드30일 체험판에는 60.HTML 데모 프로젝트가 포함되어 있습니다. | 열기 | |
| 가격전체 소스 코드가 포함된 Single, Team 및 Site 라이선스. | 열기 |