Bu yazımızda Css ile tooltip nasıl yapabiliriz onu öğreneceğiz. Tooltip dediğimiz olay aslında, bir Html etiketinin veya bir nesnenin üzerine gelindiğinde istediğimiz bilgilerin gözükmesidir.
Yazacağımız Css kodlarıyla bu mesajın, nesnenin hangi tarafında gözükeceğini belirleyebiliriz. Yani nesnenin yukarısında, sağında, aşağısında veya solunda olabilir. Dört şekilde de yapalım siz dilediğinizi kullanabilirsiniz.
4 adet button etiketi tanımlayalım ve butonların üzerine gelindiğinde tooltip mesajlarımızı gösterelim.
Css ile Tooltip Yapımı
Tooltip Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button class="tooltip-top"> Tooltip - top <span class="tooltiptext">Tooltip Top</span> </button> <button class="tooltip-right"> Tooltip - right <span class="tooltiptext">Tooltip Right</span> </button> <br /><br /> <button class="tooltip-left"> Tooltip - left <span class="tooltiptext">Tooltip Left</span> </button> <button class="tooltip-bottom"> Tooltip - bottom <span class="tooltiptext">Tooltip Bottom</span> </button> </body> </html> |
Tooltip Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
button { padding: 10px; border: none; background-color: cornflowerblue; color: #fff; } /*tooltip-top start*/ .tooltip-top { position: relative; } .tooltip-top .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 120%; left: 50%; margin-left: -60px; } .tooltip-top .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip-top:hover .tooltiptext { visibility: visible; } /*tooltip-top end*/ /*tooltip-right start*/ .tooltip-right { position: relative; } .tooltip-right .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 4px; left: 110%; } .tooltip-right .tooltiptext::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .tooltip-right:hover .tooltiptext { visibility: visible; } /*tooltip-right end*/ /*tooltip-left start*/ .tooltip-left { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip-left .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 5px; right: 110%; } .tooltip-left .tooltiptext::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip-left:hover .tooltiptext { visibility: visible; } /*tooltip-left end*/ /*tooltip-bottom start*/ .tooltip-bottom { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip-bottom .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 130%; left: 50%; margin-left: -60px; } .tooltip-bottom .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip-bottom:hover .tooltiptext { visibility: visible; } /*tooltip-bottom end*/ |
Tooltip Örnekleri
Burada yazdığımız kodları kısaca açıklamak gerekirse;
⇒ Tooltip mesajının hangi yönde görünmesini istiyorsak ona uygun kodları yazıp visibility değerini hidden yapıyoruz.
⇒ Butonun üzerine gelindiğinde ise tooltip mesajının visibility değerini visible yapıyoruz.
İsterseniz tooltip mesajının görünmesini efektif olarakta gerçekleştirebilirsiniz.
Şimdi de fadeIn efekti vererek tooltip örneği yapalım.
Tooltip Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <button class="tooltip-top"> Tooltip - top <span class="tooltiptext">Tooltip Top</span> </button> <button class="tooltip-right"> Tooltip - right <span class="tooltiptext">Tooltip Right</span> </button> <br /><br /> <button class="tooltip-left"> Tooltip - left <span class="tooltiptext">Tooltip Left</span> </button> <button class="tooltip-bottom"> Tooltip - bottom <span class="tooltiptext">Tooltip Bottom</span> </button> </body> </html> |
Tooltip Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
button { padding: 10px; border: none; background-color: cornflowerblue; color: #fff; } /*tooltip-top start*/ .tooltip-top { position: relative; } .tooltip-top .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 120%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 2s; } .tooltip-top .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; } .tooltip-top:hover .tooltiptext { visibility: visible; opacity: 1; } /*tooltip-top end*/ /*tooltip-right start*/ .tooltip-right { position: relative; } .tooltip-right .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 4px; left: 110%; opacity: 0; transition: opacity 2s; } .tooltip-right .tooltiptext::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent black transparent transparent; } .tooltip-right:hover .tooltiptext { visibility: visible; opacity: 1; } /*tooltip-right end*/ /*tooltip-left start*/ .tooltip-left { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip-left .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 5px; right: 110%; opacity: 0; transition: opacity 2s; } .tooltip-left .tooltiptext::after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent transparent black; } .tooltip-left:hover .tooltiptext { visibility: visible; opacity: 1; } /*tooltip-left end*/ /*tooltip-bottom start*/ .tooltip-bottom { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip-bottom .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 130%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 2s; } .tooltip-bottom .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } .tooltip-bottom:hover .tooltiptext { visibility: visible; opacity: 1; } /*tooltip-bottom end*/ |
Tooltip Örnekleri
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)
Html ve Css ile Pagination (Sayfalama Butonları) Yapımı
Yeni bir yazımda görüşmek üzere.
