Softonic

CSS Araç İpucu Oluşturucu

Adım 1 / 2
Sonraki

Araç ipuçları, bir projenin çoğu zaman ilk iş bir JavaScript kütüphanesine başvurduğu yerdir; oysa data-tooltip özniteliğiyle yönetilen basit bir ::after sözde öğesi gerçek durumların %90’ını karşılar. Bu oluşturucu, ihtiyacınız olan .tooltip ve .tooltip::after kurallarını tam olarak üretir: üst, alt, sol veya sağ konumu seçin, arka plan ve metin rengini ayarlayın ve bloğu stil sayfanıza kopyalayın.

Araç ipucunu HTML'nize nasıl bağlarsınız?

  1. 1

    Bir konum seçin

    Üst, alt, sol veya sağ. Oluşturucu `calc(100% + 8px)` ile birlikte doğru transform değerini kullanır; böylece balon, tetikleyici öğeye tam olarak yaslanır.

  2. 2

    Renkleri seçin

    Arka plan rengi balona, metin rengi ise araç ipucunun etiketine uygulanır. Okunabilirlik için kontrastı 4,5:1 veya daha iyi bir seviyede tutun.

  3. 3

    CSS'i kopyalayın

    Oluşturulan bloğu stil sayfanıza yapıştırın. `.tooltip`, `.tooltip::after` ve `:hover` kurallarını sağlar.

  4. 4

    Tetikleyici öğeyi işaretleyin

    Herhangi bir öğeye `class="tooltip" data-tooltip="Metniniz"` ekleyin. `::after`, özniteliği `content: attr(data-tooltip)` aracılığıyla okur.

Saf CSS araç ipuçları: neler kazanırsınız, nelerden vazgeçersiniz

Yalnızca CSS’e dayanan bir araç ipucu küçük, hızlıdır ve JavaScript devre dışıyken bile çalışır. Ancak DOM’un kaynak sırasında yer aldığından, tasarımınızda dolaşmanız gereken bazı kısıtlamaları da miras alır.

Oluşturulan CSS neler yapar

  • Tetikleyici öğeyi position: relative olarak ayarlar; böylece mutlak konumlandırılmış araç ipucu ona sabitlenir.
  • Etiketi content: attr(data-tooltip) üzerinden çeker; bu sayede metni asla iki kez yazmazsınız.
  • Opaklığı transition: opacity 0.15s ile canlandırır; böylece görünüm hızlı ama ani olmaz.
  • Balonda pointer-events: none kullanır; böylece tetikleyici öğeye yapılan tıklamaları asla engellemez.

Konum hesaplaması

Konum Ofset kuralı
üst bottom: calc(100% + 8px); left: 50%; translateX(-50%)
alt top: calc(100% + 8px); left: 50%; translateX(-50%)
sol right: calc(100% + 8px); top: 50%; translateY(-50%)
sağ left: calc(100% + 8px); top: 50%; translateY(-50%)

Erişilebilirlik uyarıları

  • data-tooltip, ekran okuyucular tarafından okunmaz. Bilgi önemliyse onu aria-label veya görünür bir metinle birlikte kullanın.
  • Klavye kullanıcılarının :hover ile birlikte :focus-visible’a da ihtiyacı vardır. Oluşturulan kuralı .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; } olacak şekilde genişletin.
  • Bir üst öğedeki overflow: hidden tarafından kırpılan araç ipuçları kaybolur. Tetikleyici öğeyi kırpma kapsayıcısının dışına taşıyın veya yoğun arayüzler için JavaScript ile işlenen bir açılır pencereye (popover) geçin.

Sık Sorulan Sorular

Bir sözde öğe DOM’u temiz tutar, etiket metnini iki kez yazmayı önler ve yanlışlıkla başka öğelerle eşleşme endişesi olmadan araç ipucunu şekillendirmenize olanak tanır. Bunun bedeli, ::after içeriğinin yardımcı teknolojiler tarafından dizine eklenememesidir; bu nedenle kritik metni aria-label ile pekiştirin.

Evet, ikinci bir sözde öğe ekleyin, örneğin .tooltip::before; sıfır genişlik ve yükseklikte, renkli kenarlıkları olan bir kutu biçiminde şekillendirin. Bu, klasik bir CSS üçgen numarasıdır; bu paketteki eşlik eden CSS Triangle Generator aracı, ihtiyaç duyduğunuz kesin kenarlık bildirimlerini üretir.

::after kuralına transition-delay: 0.3s ekleyin, ancak fare ayrılırken bunu sıfıra sıfırlayın; ya da görünmeyi geciktirip kaybolmayı geciktirmemek için transition: opacity 0.15s 0.3s; kullanın.

Seçtiğiniz konum ve renkler CSS’i oluşturmak için sunucumuza gönderilir; ancak saklanmaz veya yeniden kullanılmaz. Çok adımlı sayfada değerler adımlar arasında bağlantı üzerinden taşınır; tek sayfalık görünümde hiçbir şey saklanmaz.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur