CSS IPUCU Jeneratörü Özelleştirilebilir konum, ok, renk ve stil ile saf CSS ipuçları oluşturun.

🎨

CSS IPUCU Jeneratörü

Özelleştirilebilir konum, ok, renk ve stil ile saf CSS ipuçları oluşturun.

Araç ipucu konumunu seçin

Araç ipucunun konumu için üst, alt, sol veya sağ konumlandırması seçin.

Araç ipucunu özelleştirin

Renkleri, yazı tipi boyutunu, dolgu alanını, kenar yarıçapını ve ok boyutunu özelleştirin.

CSS'yi kopyalayın

Araç ipucunu önizleyin ve ok stilleri dahil olmak üzere tam CSS'yi kopyalayın.

Loading tool...

What Is CSS IPUCU Jeneratörü?

CSS Tooltip Oluşturucu, JavaScript gerektirmeyen saf CSS araç ipuçlarını oluşturur. Araç ipuçları, kullanıcıların öğeler üzerinde gezinmesi veya odaklanması üzerine ek bilgi sağlar ve erişilebilir web arayüzleri için temel olarak kabul edilir. Bu araç, araç ipucunun konumunu (üst, alt, sol veya sağ), arka plan ve metin renklerini, yazı tipi boyutunu, doldurmayı, kenar yarıçapını ve ok boyutunu özelleştirmenize olanak tanır. Araç ipucu oku, CSS sınır hileleri kullanılarak oluşturulur ve konumlandırma, ebeveyn öğeye göre mutlak konumlandırma ile yönetilir. Oluşturulan kod, sarmalayıcı, araç ipucu ve ok pseudo-element stillerini içerir ve size eksiksiz, kendi içinde birleşik bir araç ipucu çözümü sunar. Ön izleme, araç ipucunun her zaman görünür olmasını sağlar, böylece gerçek zamanlı olarak stil değişikliklerinizi görebilirsiniz.

Why Use CSS IPUCU Jeneratörü?

JavaScript bağımlılığı gerektirmeyen saf CSS çözümü
Dört konum seçeneği ile düzgün şekilde yönlendirilmiş oklar
Renkler, boyutlandırma ve boşlukların tam özelleştirilmesi
Oluşturulan kod, sarmalayıcı, araç ipucu ve ok stillerini içerir

Common Use Cases

Simge Araç İpuçları

İkon-only düğmeler için daha iyi erişilebilirlik sağlamak amacıyla açıklamalı araç ipuçları ekleyin.

Form Alanı İpuçları

Form girişlerinde yardımcı ipuçları ve doğrulama mesajları sağlayın.

Navigasyon Etiketleri

Kompakt navigasyon öğeleri için gezinme sırasında etiketler gösterin.

Veri Görselleştirme

Grafik öğelerine ve veri noktalarına ek bağlam sağlamak amacıyla araç ipuçları ekleyin.

Technical Guide

CSS araç ipuçları, göreli konumlandırılmış bir sarmalayıcı içinde mutlak konumlandırma kullanır. Araç ipucu öğesi, üst/alt/sol/sağ ve transform ile merkezleme için kullanılır. Ok, ::after pseudo-elementi ile CSS sınır üçgen tekniği kullanılarak oluşturulur - üç tarafın şeffaf sınırlarını ayarlayarak ve bir tarafın renkli sınırını ayarlayarak, bir üçgen şekil oluşur. Araç ipucu, sarmalayıcı上的 :hover pseudo-sınıfı ile gösterilir/gizlenir, görünürlüğü kontrol etmek için display veya visibility kullanılır. Erişilebilirlik için, role="tooltip" ve aria-describedby özniteliklerini eklemeyi düşünün. white-space: nowrap özelliği, kısa araç ipuçlarında metin sarımını önler. Daha uzun içerikler için, max-genişlik ayarlayın ve white-space'i kaldırın. Geçişler, opaklık ve transform kullanarak sorunsuz gösterme/gizleme animasyonları eklemek için kullanılabilir.

Tips & Best Practices

1
Kazara tetiklenmeleri önlemek için göstermeden önce kısa bir gecikme ekleyin
2
Ekran okuyucu erişilebilirliği için aria-describedby kullanın
3
Araç ipucu metnini möglichse 150 karakterin altında tutun
4
Kenar kesilmelerini önlemek için araç ipucu konumlandırmasını ekran kenarlarında test edin

Related Tools

CSS Düğme Oluşturucu

Renkler, iç boşluklar, sınırlar, gölgeler ve hover efektleri ile özel CSS düğmeleri tasarlayın.

🎨 CSS & Design

CSS Kart Oluşturucu

Arka plan bulanıklığı, saydamlık ve gölge kontrolleri ile cam gibi kart tasarımları oluşturun.

🎨 CSS & Design

CSS Animasyon Oluşturucu

Önceden tanımlanmış efektler ve özelleştirilebilir zamanlama ile CSS anahtar kare animasyonları oluşturun.

🎨 CSS & Design

CSS Geçiş Jeneratörü

Özellik, süre, yumuşatma ve hover efektleri ile özelleştirilebilir CSS geçişleri oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Bu araç ipuçları mobil cihazlarda çalışır mı?

CSS :hover araç ipuçları mobil cihazlarda bir dokunuşla çalışır, ancak daha iyi dokunmatik etkileşim kontrolü için JavaScript kullanmayı düşünün.

Q Göstermeden önce gecikme nasıl eklenir?

Araç ipucu görünürlüğü ve saydamlık özelliklerine geçiş gecikmesi ekleyin ve böylece görünür olmasını geciktirin.

Q Araç ipucunu gezinti sırasında görünür tutabilir miyim?

Evet, araç ipucu öğesine de sarmalayıcıya ek olarak :hoverseudo-sınıfını uygulayın.

Q Yalnızca CSS ile oluşturulan araç ipuçları erişilebilir mi?

Tam erişilebilirlik için ARIA özniteliklerini ekleyin. Yalnızca CSS çözümleri ekran okuyucuları için yeterli olmayabilir.

Q Araç ipucu kesilmesini nasıl önlerim?

Sarmalayıcı veya üst öğenin görüntülenme alanının görünür olduğundan emin olun ve görüntü kenarları yakınlarında konumlandırmasını kontrol edin.

About This Tool

CSS IPUCU Jeneratörü is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.