TsgcHTMLComponent_Tooltip: sayfanın öğeleri üzerinde, örneğin araç çubuğu düğmeleri ve form alanlarında, her biri bir hedef ve bir metin adlandıran öğe listesinden Bootstrap ipuçları. İpuçları üzerine gelindiğinde ve klavye odağında açılır, Esc ile kapanır ve htmx'in içeri aldığı içerikte çalışır, Delphi, C++ Builder ve .NET ile.
İpucu başına bir öğe ekleyin ve HTML değerini hedeflerle aynı sayfada sunun. Bileşen görünür işaretleme oluşturmaz: bir JSON bloğu ipuçlarını listeler ve küçük bir betik sayfa yüklendiğinde her hedef öğede bir Bootstrap 5 ipucu oluşturur.
TsgcHTMLComponent_Tooltip, Öğeler içinde ipucu başına bir TsgcHTMLTooltipItem ile
Bir JSON bloğu ve küçük bir betik, sgcHTML motorunun gömülü bir kaynaktan sunduğu Bootstrap paketinin üzerinde, bu yüzden CDN gerekmez
Delphi, C++ Builder, .NET
Bileşendeki Placement, Trigger, Delay, Variant ve MaxWidth her öğenin varsayılanlarıdır ve bir öğe bunlardan herhangi birini kendi değeriyle geçersiz kılar. Add hedefi ve metni tek çağrıda ayarlar.
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 değeri ayarlanmıştır
oItem.Title := 'Email';
oItem.Text := 'The invoice is sent to this address.';
oItem.Placement := ttpRight;
Result := oTip.HTML; // hedeflerin bulunduğu sayfada sunun
finally
oTip.Free;
end;
end;@* Üst öğenin nitelikleri her öğenin varsayılanlarıdır *@
<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 değeri ayarlanmıştır
item.Title = "Email";
item.Text = "The invoice is sent to this address.";
item.Placement = TsgcHTMLTooltipPlacement.ttpRight;
string html = tip.HTML;Fareyle, klavyeyle veya ekran okuyucuyla her kullanıcıya ulaşan kısa ipuçları.
Varsayılan tetikleyiciyle, klavye kullanıcısı hedef odak aldığında ipucunu görür. Odak alamayan hedefler, örneğin bir span veya simge, tabindex="0" alır ve ipucu ortadan kalktığında bu yeniden kaldırılır.
İpuçları WCAG 2.2 başarı ölçütü 1.4.13'e uyar. Esc, işaretçiyi veya odağı hareket ettirmeden açık her ipucunu kapatır, işaretçi ipucuna kapanmadan geçebilir ve ipucu, işaretçi veya odak ayrılana kadar açık kalır. Asla bir zamanlayıcıyla kapanmaz.
aria-describedby ipucunu odaklanan öğeye bağlar, böylece ekran okuyucular metni adından sonra okur. Hedefin zaten sahip olduğu bir aria-describedby yanında korunur ve ipucu kapandığında geri yüklenir.
Otomatik, üst, alt, sol veya sağ. İpucu, görünüm alanına sığdığı sürece istenen tarafı korur ve yalnızca o tarafta yer yoksa başka bir tarafa geçer.
Variant Bootstrap görünümünü seçer: açık, koyu veya bir tema rengi (primary, secondary, success, danger, warning ya da info). MaxWidth bir CSS uzunluğu alır ve boş bırakılırsa 200px kalır.
Düz metin HTML olarak kodlanır ve satır sonları <br> olur. Title kalın bir ilk satır ekler. HTML True iken metin, sgcHTMLSanitizeHTML içinden geçen bir işaretlemedir; biçimlendirmeyi ve görüntüleri korur, betikleri, olay işleyici niteliklerini ve güvenli olmayan URL'leri kaldırır.
En sık başvuracağınız üyeler.
Add(aTarget, aText) tek çağrıda bir ipucu ekler ve Items.Add geri kalanı ayarlamanız için bir öğe döndürür. Her öğenin Target, TargetComponent, Text, Title ve HTML özellikleri ile devralma değeri olan bileşenin beş seçeneği vardır: ttpInherit, tttInherit, Delay -1, ttvInherit ve boş bir MaxWidth.
Bir CSS seçicisi; eşleşen her öğe ipucunu alır, böylece tek bir öğe bir sınıfın tüm düğmelerini, örneğin .toolbar .btn-danger veya [name="email"], tanımlayabilir. Hedefi olmayan bir öğe dışarıda bırakılır.
Aynı sayfanın bir bileşenini bağlar ve ipucu, kimliği o bileşenin kimlik özelliği olan öğeye konur: Edit için EditID, CheckBox için CheckBoxID, Popover için PopoverID, aksi halde ElementID. Yalnızca o kimlik ayarlıysa çözülür; aksi halde öğe Target kullanır.
Trigger ipucunu üzerine gelindiğinde ve odakta (varsayılan), tıklamada, odakta veya elle açar. Delay bir ipucu açılmadan önceki milisaniye sayısıdır. Tıklama tetikleyicili bir düğme hedefinde Enter ve Boşluk onu açar veya kapatır.
Her htmx:afterSwap ve htmx:load sonrasında betik sayfayı yeniden tarar. Bir öğeyle eşleşen yeni öğeler ipucunu alır; öğesi veya JSON bloğu sayfadan ayrılan ipuçları ortadan kaldırılır. Sayfada kaç bileşen olursa olsun betik sayfa başına bir kez çalışır.
HTML, JSON bloğunu ve ardından ipucu betiğini döndürür; hiçbir öğede hem hedef hem metin yoksa boş bir dize döndürür. Bootstrap paketiyle birlikte sunun, örneğin bir TsgcHTMLTemplate_Bootstrap şablonunun BodyContent alanında. Sayfadaki konumu önemli değildir ve betik paketi bekler.
İpuçlarını kısa tutun: kullanıcının erişmesi gereken denetimleri barındıramazlar. Etkileşimli içerik için bir Popover veya bir Modal kullanın.
Bir Razor görünümünde <sgc-tooltip> Tag Helper'ı bileşeni, öğe başına bir <sgc-tooltip-item /> alt öğesiyle oluşturur. Üst öğenin nitelikleri her öğenin varsayılanlarıdır. İpuçları sunucu olaylarına ihtiyaç duymaz, bu yüzden bileşen her oluşturma için yaratılır. TargetComponent için nitelik yoktur: öğenin kimliğiyle target kullanın.
Demos\60.HTML\01.RunTime\29.Tour, 8131 numaralı bağlantı noktasındaki sgc Cloud Console'dur; araç çubuğu düğmelerinde, istatistik kartlarında ve form alanlarında ipuçları bulunan bir SaaS panosu ve yanında ilk çalıştırma ürün turu vardır. Tasarım zamanı, Lazarus ve .NET sürümleri bunu yansıtır.
| Online DeneyinTur & İpuçları demosunda görün, eSeGeCe demo sunucusunda canlı çalışıyor. | Aç | |
| Çevrimiçi yardımBu bileşenin tam API başvurusu ve kullanım kılavuzu. | Aç | |
| Tour BileşeniAynı demoda ipuçlarıyla birlikte gösterilen, spot ışıklı yönlendirmeli bir ürün turu. | Aç | |
| Popover BileşeniBir ipucundan fazlası olan içerik için bir tetikleyici öğe üzerindeki balon. | Aç | |
| Tüm sgcHTML Bileşenleri80'den fazla bileşenin tüm özellik matrisine göz atın. | Aç | |
| Ücretsiz Deneme Sürümünü İndirin30 günlük deneme sürümü 60.HTML demo projelerini içerir. | Aç | |
| FiyatlandırmaTam kaynak kodlu Single, Team ve Site lisansları. | Aç |