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

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.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur