CSS ile Form Tooltip Hazırlıyoruz

CSS ile Form Tooltip Hazırlıyoruz
55

Bugün kü yazımızda hazırladığınız arayüzlerde kullanıcıların doldurulması gereken  formlar hakkında bilgi verici kelime ekleme gerekliliği oluşabiliyor bunun için css yardımıyla form tooptip örneği hazırlayacağız. Sizler bu örnek yardımıyla daha özgün içerikler oluşturabileceksiniz ve arayüzünüzü kullanıcı deneyimini geliştirebileceksiniz.

[indir]Demo[/indir]

CSS ile Form Tooltip Nasıl Yapılır?

İlk html yapımızı hazırlayalım.. “Form” divi ile örneğimizi içerisine alıyoruz daha sonra input yardımıyla form oluşturuyoruz ve bu inputa tıklandığında gözükecek olan form-tooltip divini açıyoruz..


<div class='form'>
<input class='form-input' placeholder='Açıklama için tıklayın' type='text'>
<div class='form-tooltip'>Açıklama sadece tıklandığında gözüküyor</div>
<input class='form-input' placeholder='Veya burayada tıklayabilirsiniz' type='text'>
<div class='form-tooltip'>Bu açıklama ise biraz daha fazla içerğie sahip. <br />Sizce de öyle mi? </div>
</div>

Şimdi sıra geldi css kodlarına. İlk olarak sürekli gözükecek olan inputa background ve buna benzer standart kodlarını atayalım.


.form-input {
appearance: none;
border-radius: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif;
outline: none;
border: none;
line-height: 1.3;
width: 100%;
height: 32px;
padding: 0 16px;
font-size: 14px;
margin-top: 2px;
color: #16a085;
}

Daha sonra tıklandığında gözükecek olan tooltip yani açıklamaların gözükeceği içeriğe standart css kodlarımızı atayalım. visibility: hidden kodu sayesinde içeriğin ilk olarak gözükmemesini sağlıyoruz.


.form-tooltip {
display: block;
visibility: hidden;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 0;
margin-bottom: -8px;
cursor: help;
-webkit-animation-name: fold;
animation-name: fold;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-direction: reverse;
animation-direction: reverse;
padding: 4px 16px;
background: #126958;
color: #fff;
font-weight: 600;
font-size: 12px;
line-height: 16px;
}

Şimdide sıra geldi açıklamanın hangi şartta gözükeceğini belirleyelim. Ben Focus seçeneğiyle birlikte form-input classımıza tıklandığında gözükmesini sağlayacağım.. Siz bunu focus yerine hover’da yapabilirsiniz. Hover yaptığınzıda inputun üzerine gelindiğinde açıklama gözükecektir..


.form-input:focus + .form-tooltip {
margin-bottom: 0;
height: auto;
visibility: visible;
-webkit-animation: fold ease-in 500ms;
animation: fold ease-in 500ms;
-webkit-animation-direction: normal;
animation-direction: normal;
}

Kapanış
İşlemleri tamamladık örnek hakkında ki yorumlarınızı bekliyorum..

Yorum Yap