TsgcHTMLComponent_Tooltip: podpowiedzi Bootstrap na elementach strony, takich jak przyciski paska narzędzi i pola formularzy, z listy elementów, z których każdy wskazuje cel i tekst. Podpowiedzi otwierają się po najechaniu i po fokusie klawiatury, zamykają się klawiszem Esc i działają na treści podmienianej przez htmx, w Delphi, C++ Builder i .NET.
Dodaj jeden element na podpowiedź i serwuj HTML na tej samej stronie co cele. Komponent nie renderuje widocznych znaczników: blok JSON wymienia podpowiedzi, a mały skrypt tworzy podpowiedź Bootstrap 5 na każdym elemencie docelowym po załadowaniu strony.
TsgcHTMLComponent_Tooltip, z jednym TsgcHTMLTooltipItem na podpowiedź w Elementy
Blok JSON i mały skrypt, na pakiecie Bootstrap serwowanym przez silnik sgcHTML z zasobu wbudowanego, więc CDN nie jest potrzebne
Delphi, C++ Builder, .NET
Placement, Trigger, Delay, Variant i MaxWidth komponentu są wartościami domyślnymi każdego elementu, a element nadpisuje każdą z nich własną wartością. Add ustawia cel i tekst jednym wywołaniem.
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; // jego EditID jest ustawione
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // serwuj go na stronie z celami
finally
oTip.Free;
end;
end;@* Atrybuty nadrzędne są wartościami domyślnymi każdego elementu *@
<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; // jego EditID jest ustawione
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;Krótkie wskazówki, które docierają do każdego użytkownika, myszą, klawiaturą lub czytnikiem ekranu.
Przy domyślnym wyzwalaczu użytkownik klawiatury otrzymuje podpowiedź, gdy cel dostaje fokus. Cele, które nie mogą przyjąć fokusu, takie jak span lub ikona, otrzymują tabindex="0", usuwany ponownie po zniszczeniu podpowiedzi.
Podpowiedzi spełniają kryterium sukcesu WCAG 2.2 1.4.13. Esc zamyka każdą otwartą podpowiedź bez poruszania wskaźnikiem ani fokusem, wskaźnik może przejść na podpowiedź bez jej zamykania, a podpowiedź pozostaje otwarta, dopóki wskaźnik lub fokus jej nie opuści. Nigdy nie zamyka się na czasomierzu.
aria-describedby łączy podpowiedź z elementem z fokusem, więc czytniki ekranu odczytują tekst po jego nazwie. aria-describedby, który cel już miał, jest zachowywany obok i przywracany po zamknięciu podpowiedzi.
Auto, góra, dół, lewo lub prawo. Podpowiedź zachowuje żądaną stronę, gdy tylko mieści się w oknie, i przechodzi na inną stronę tylko wtedy, gdy ta nie ma miejsca.
Variant wybiera wygląd Bootstrap, jasny, ciemny lub kolor motywu: primary, secondary, success, danger, warning lub info. MaxWidth przyjmuje długość CSS, a puste zachowuje 200px.
Zwykły tekst jest kodowany jako HTML, a jego podziały wierszy stają się <br>. Title dodaje pogrubiony pierwszy wiersz. Przy HTML True tekst jest znacznikami, które przechodzą przez sgcHTMLSanitizeHTML, co zachowuje formatowanie i obrazy, a usuwa skrypty, atrybuty obsługi zdarzeń i niebezpieczne adresy URL.
Składowe, po które sięgasz najczęściej.
Add(aTarget, aText) dodaje podpowiedź jednym wywołaniem, a Items.Add zwraca element, w którym ustawia się resztę. Każdy element ma Target, TargetComponent, Text, Title i HTML, a także pięć opcji komponentu z wartością dziedziczoną: ttpInherit, tttInherit, Delay -1, ttvInherit i pusty MaxWidth.
Selektor CSS, a każdy pasujący element dostaje podpowiedź, więc jeden element może opisać wszystkie przyciski klasy, na przykład .toolbar .btn-danger lub [name="email"]. Element bez celu jest pomijany.
Łączy komponent tej samej strony, a podpowiedź trafia na element, którego identyfikator jest właściwością id tego komponentu: EditID dla Edit, CheckBoxID dla CheckBox, PopoverID dla Popover, w przeciwnym razie jego ElementID. Rozwiązuje się tylko wtedy, gdy ten identyfikator jest ustawiony, w przeciwnym razie element używa Target.
Trigger otwiera podpowiedź po najechaniu i fokusie (domyślnie), po kliknięciu, po fokusie albo ręcznie. Delay to liczba milisekund przed otwarciem podpowiedzi. Na przycisku docelowym z wyzwalaczem kliknięcia Enter i spacja otwierają ją lub zamykają.
Po każdym htmx:afterSwap i htmx:load skrypt ponownie skanuje stronę. Nowe elementy pasujące do elementu listy dostają podpowiedź, a podpowiedzi, których element lub blok JSON opuścił stronę, są usuwane. Skrypt uruchamia się raz na stronę, bez względu na liczbę komponentów na niej.
HTML zwraca blok JSON, a po nim skrypt podpowiedzi, albo pusty ciąg, gdy żaden element nie ma jednocześnie celu i tekstu. Serwuj go razem z pakietem Bootstrap, na przykład w BodyContent szablonu TsgcHTMLTemplate_Bootstrap. Jego położenie na stronie nie ma znaczenia, a skrypt czeka na pakiet.
Podpowiedzi powinny być krótkie: nie mogą zawierać kontrolek, do których użytkownik musi dotrzeć. Dla treści interaktywnych użyj Popover lub Modal.
W widoku Razor Tag Helper <sgc-tooltip> renderuje komponent, z jednym potomkiem <sgc-tooltip-item /> na element. Atrybuty rodzica są wartościami domyślnymi każdego elementu. Podpowiedzi nie potrzebują zdarzeń serwera, więc komponent jest tworzony przy każdym renderowaniu. Nie ma atrybutu dla TargetComponent: użyj target z identyfikatorem elementu.
Demos\60.HTML\01.RunTime\29.Tour to sgc Cloud Console na porcie 8131, panel SaaS z podpowiedziami na przyciskach paska narzędzi, kartach statystyk i polach formularza, obok przewodnika po produkcie przy pierwszym uruchomieniu. Wersje design time, Lazarus i .NET są jego odpowiednikami.
| Wypróbuj onlineZobacz to w demie Przewodnik i podpowiedzi, działającym na żywo na serwerze demo eSeGeCe. | Otwórz | |
| Pomoc onlinePełna dokumentacja API i przewodnik użytkowania tego komponentu. | Otwórz | |
| Komponent TourPrzewodnik po produkcie z reflektorem, pokazany razem z podpowiedziami w tym samym demo. | Otwórz | |
| Komponent PopoverDymek na elemencie wyzwalającym dla treści większej niż wskazówka. | Otwórz | |
| Wszystkie komponenty sgcHTMLPrzejrzyj pełną matrycę funkcji 80+ komponentów. | Otwórz | |
| Pobierz bezpłatną wersję próbną30-dniowa wersja próbna zawiera projekty demonstracyjne 60.HTML. | Otwórz | |
| CennikLicencje Single, Team i Site z pełnym kodem źródłowym. | Otwórz |