Basit bir CSS3 Tooltip Nasıl Oluşturulur

Araç ipuçları, yalnızca bir resmin veya metnin üzerine gelinerek kullanıcılarınıza daha fazla bilgi göstermenin harika bir yoludur. Örneğin, resimler için altyazılar veya bağlantılara yönelik daha uzun açıklamalar ya da sitenin kullanıcı deneyimini geliştirmeye yönelik herhangi bir yararlı bilgiyi tasarımda yer almadan kullanmak için kullanılabilirler.

Bugün size hiper bağlantılarınızın başlık etiketini görüntülemek için HTML ve CSS kullanarak nasıl basit bir araç ipucu oluşturacağınızı göstereceğim.

Bağlantı için bazı basit işaretlemeler oluşturarak başlayalım. Araç ipucu içeriği olacak bir başlık vermeli ve ona bir sınıf atamalıyız:

CSS3 Tooltip

Bir sonraki adım, tooltip sınıfımız için bazı temel tasarımlar yaratmaktır:

.tooltip{display: inline;position: relative;}

Artık araç ipucumuzu, bağlantı konumuz ile göreli konumlandırmayı kullanarak görüntülüyoruz. Ardından, araç ipucunun gövdesini oluşturmak için yuvarlatılmış bir kutu oluşturmak ve bağlantı noktasının üzerinde yüzecek şekilde konumlandırmak istiyoruz:

.tooltip:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}

Bir eleman seçen vurgulu seçiciyi, bu durumda bizim link, mouseover ve: seçilen elemandan sonra içerik ekleyen selektörden yararlanıyoruz. % 80 opaklığa sahip siyah bir arka plan belirledik ve RGBA renklerini desteklemeyen tarayıcılarda koyu gri bir arka plan sağladık.

Kenarlıklı radyus özniteliği kullanılarak biraz yuvarlak köşeler oluşturuluyor ve metin rengini beyaza ayarladık. Son olarak, araç ipucu kutusunu bağlantının solundan konumlandırdık ve küçük bir dolgu ekledik.

Stil ve konumlandırmanın yanı sıra, içerik özelliğini ayarladık:

content: attr(title);

Bu özellik, istediğimiz içeriği bir dize, bir medya dosyası veya öğenin bir niteliği olarak eklememize olanak tanır. Bu durumda bağlantının başlık özelliğini kullanıyoruz.

Artık bağlantınızın üzerine geldiğinizde, bağlantı başlığınız olarak belirlediğiniz metnin üzerinde bir araç ipucu görünmelidir. Yine de bir sorunumuz var, başlık bilgileri iki kez gösteriliyor: bir kez araç ipucunda ve bir kez tarayıcıda. Bunu düzeltmek için HTML'mizde küçük bir değişiklik yapmamız gerekiyor:

CSS3 Araç İpucu 

Burada yaptığımız şey, bağlantı metnini, kendi başlık özelliğine sahip bir span etiketinde sarmalamaktır. Artık, tarayıcı, bağlantı işaretlendiğinde yayılma etiketinde ayarlanan başlığı gösterecektir.

Bitirmek için, biraz daha fazla dokunuş hissi vermek için araç ipinin altına bir ok ekleyeceğiz. Bunu aşağıdakileri kullanarak yaparız: selektör ve bazı kenarlık stilleri:

.tooltip:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}

Bir okun etkisini yaratmak için burada birkaç sınır korsan kullanıyoruz: sol ve sağdaki kenarlık renklerini saydamlaştırmak ve kenarlık genişliklerini kontrol etmek için. Okunu da yerleştirdik, böylece araç ipucu kutusunun altında oturuyor.

Ve işte orada var, öğenin başlık etiketi ile basit bir araç ipucu üzerinde gezindi. Bunu ayrıca resim alt etiketleri için de kullanabilir veya hatta istediğiniz metni açmak için kendi metninizi CSS'ye ekleyebilirsiniz.

Bir görüntüleyebilirsiniz burada demo çalışma .

Araç ipuçlarını nasıl kurarsınız? Bu tekniği bir sitede kullandınız mı? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, ipucu resmi Shutterstock üzerinden.