Tooltip
TsgcHTMLComponent_Tooltip: ツールバーのボタンやフォームフィールドなど、ページの要素に Bootstrap のツールチップを付けます。ターゲットとテキストを指定する項目のリストから作成します。ツールチップはホバーとキーボードフォーカスで開き、Esc で閉じ、htmx が差し込んだコンテンツでも動作します。Delphi、C++ Builder、.NET で利用できます。
TsgcHTMLComponent_Tooltip: ツールバーのボタンやフォームフィールドなど、ページの要素に Bootstrap のツールチップを付けます。ターゲットとテキストを指定する項目のリストから作成します。ツールチップはホバーとキーボードフォーカスで開き、Esc で閉じ、htmx が差し込んだコンテンツでも動作します。Delphi、C++ Builder、.NET で利用できます。
ツールチップごとに 1 つの項目を追加し、ターゲットと同じページで HTML を配信します。コンポーネントは目に見えるマークアップをレンダリングせず、JSON ブロックがツールチップを列挙し、小さなスクリプトがページの読み込み時に各ターゲット要素へ Bootstrap 5 のツールチップを作成します。
TsgcHTMLComponent_Tooltip、ツールチップごとに アイテム の TsgcHTMLTooltipItem を 1 つ使用します
sgcHTML エンジンが埋め込みリソースから配信する Bootstrap バンドルの上に、JSON ブロックと小さなスクリプトを置くため、CDN は不要です
Delphi, C++ Builder, .NET
コンポーネントの Placement、Trigger、Delay、Variant、MaxWidth はすべての項目の既定値で、項目は独自の値でそのいずれも上書きできます。Add は 1 回の呼び出しでターゲットとテキストを設定します。
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 は、ライト、ダーク、またはテーマカラー (primary、secondary、success、danger、warning、info) の Bootstrap の見た目を選びます。MaxWidth は CSS の長さを受け取り、空の場合は 200px のままです。
プレーンテキストは HTML エンコードされ、改行は <br> になります。Title は太字の最初の行を追加します。HTML が True の場合、テキストはマークアップとして sgcHTMLSanitizeHTML を通り、書式と画像は残り、スクリプト、イベントハンドラー属性、安全でない URL は削除されます。
最もよく使うメンバーです。
Add(aTarget, aText) は 1 回の呼び出しでツールチップを追加し、Items.Add は残りを設定するための項目を返します。各項目には Target、TargetComponent、Text、Title、HTML があり、コンポーネントの 5 つのオプションには継承値があります。ttpInherit、tttInherit、Delay の -1、ttvInherit、そして空の MaxWidth です。
CSS セレクターで、一致するすべての要素にツールチップが付くため、1 つの項目で .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 ブロックがページから消えたツールチップは破棄されます。ページにコンポーネントがいくつあっても、スクリプトはページごとに 1 回だけ実行されます。
HTML は JSON ブロックに続けてツールチップのスクリプトを返し、ターゲットとテキストの両方を持つ項目がなければ空の文字列を返します。Bootstrap バンドルと一緒に、たとえば TsgcHTMLTemplate_Bootstrap の BodyContent で配信してください。ページ内の位置は関係なく、スクリプトはバンドルを待ちます。
ツールチップは短くしてください。ユーザーが操作しなければならないコントロールは入れられません。インタラクティブなコンテンツには Popover か Modal を使用してください。
Razor ビューでは、<sgc-tooltip> Tag Helper がコンポーネントをレンダリングし、項目ごとに 1 つの <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 ライセンス。 | 開く |