Severity: 8192
Message: Creation of dynamic property CI_URI::$config is deprecated
Filename: core/URI.php
Line Number: 101
Severity: 8192
Message: Creation of dynamic property CI_Router::$uri is deprecated
Filename: core/Router.php
Line Number: 127
Severity: 8192
Message: Creation of dynamic property index::$benchmark is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$hooks is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$config is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$log is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$utf8 is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$uri is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$exceptions is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$router is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$output is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$security is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$input is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$lang is deprecated
Filename: core/Controller.php
Line Number: 75
Severity: 8192
Message: Creation of dynamic property index::$load is deprecated
Filename: core/Controller.php
Line Number: 78
Severity: 8192
Message: Creation of dynamic property index::$db is deprecated
Filename: core/Loader.php
Line Number: 390
Severity: 8192
Message: Creation of dynamic property CI_DB_mysqli_driver::$autoinit is deprecated
Filename: database/DB_driver.php
Line Number: 371
Severity: 8192
Message: Return type of CI_Session_files_driver::open($save_path, $name) should either be compatible with SessionHandlerInterface::open(string $path, string $name): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Filename: drivers/Session_files_driver.php
Line Number: 113
Severity: 8192
Message: Return type of CI_Session_files_driver::close() should either be compatible with SessionHandlerInterface::close(): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Filename: drivers/Session_files_driver.php
Line Number: 280
Severity: 8192
Message: Return type of CI_Session_files_driver::read($session_id) should either be compatible with SessionHandlerInterface::read(string $id): string|false, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Filename: drivers/Session_files_driver.php
Line Number: 145
Severity: 8192
Message: Return type of CI_Session_files_driver::write($session_id, $session_data) should either be compatible with SessionHandlerInterface::write(string $id, string $data): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Filename: drivers/Session_files_driver.php
Line Number: 223
Severity: 8192
Message: Return type of CI_Session_files_driver::destroy($session_id) should either be compatible with SessionHandlerInterface::destroy(string $id): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Filename: drivers/Session_files_driver.php
Line Number: 303
Severity: 8192
Message: Return type of CI_Session_files_driver::gc($maxlifetime) should either be compatible with SessionHandlerInterface::gc(int $max_lifetime): int|false, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice
Filename: drivers/Session_files_driver.php
Line Number: 344
Severity: 8192
Message: Creation of dynamic property index::$session is deprecated
Filename: core/Loader.php
Line Number: 1290
Severity: 8192
Message: Creation of dynamic property index::$pagination is deprecated
Filename: core/Loader.php
Line Number: 1290
Severity: 8192
Message: Creation of dynamic property index::$email is deprecated
Filename: core/Loader.php
Line Number: 1290
Severity: 8192
Message: Creation of dynamic property index::$ders_model is deprecated
Filename: core/Loader.php
Line Number: 353
Severity: 8192
Message: Creation of dynamic property index::$bilgi_model is deprecated
Filename: core/Loader.php
Line Number: 353
Severity: 8192
Message: Creation of dynamic property CI_Loader::$data is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$benchmark is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$hooks is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$config is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$log is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$utf8 is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$uri is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$exceptions is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$router is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$output is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$security is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$input is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$lang is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$load is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$db is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$session is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$pagination is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$email is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$ders_model is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$bilgi_model is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property index::$makale_model is deprecated
Filename: core/Loader.php
Line Number: 353
Severity: 8192
Message: setcookie(): Passing null to parameter #7 ($httponly) of type bool is deprecated
Filename: core/Input.php
Line Number: 410
Severity: 8192
Message: Creation of dynamic property index::$yorum_model is deprecated
Filename: core/Loader.php
Line Number: 353
Severity: 8192
Message: Creation of dynamic property CI_Loader::$makale_model is deprecated
Filename: core/Loader.php
Line Number: 925
Severity: 8192
Message: Creation of dynamic property CI_Loader::$yorum_model is deprecated
Filename: core/Loader.php
Line Number: 925
Açıkçası bu yazıyı hangi kategori altında açacağıma karar veremedim çünkü içerisinde hem bolca CSS kullanacağız hem de HTML5'in getirdiği data özelliklerini kullanacağız. Üzerine gelince açılan pencereler hakkında nette muhtelif örneklerini bulmak mümkün, bu yazıda üzerine gelince açılan tooltip örneklerini paylaşacağım. Tooltip bir yazının veya kelimenin üzerine gelince açılan yardımcı pencerelerdir. Örnek olarak mouse ile bir bağlantının üzerine gelince beyaz veya sarı kutucuk açılır. Diğer bir örnek ise bu sitenin iletişim sayfasında e-mail kısmında bulunan soru işareti üzerine gelince gri ipucu veren bir pencere açılır. Ancak tooltip'i toggle ile karıştırmamak gerekir çünkü yeni bir div penceresi oluşturmayacağız. İşte bunları CSS'nin content özelliği, before ve after seçicilerinden, HTML5'in de data-* özelliklerinden faydalanıp yapacağız. Size önceden geliştirdiğim 2 örnekle açıklamaya çalışacağım. Not: Bütün tarayıcılar bu özellikleri desteklemeyebilir, o yüzden kullanıp kullanmamak size kalmış.
Örnek 1) Oluşturulan Görüntü
Resimde görüldüğü gibi mouse imleci "phileo" kelimesinin üzerine getirildiğinde ipucu penceresi açılıyor. Öncelikle HTML kodlarımızı yazalım.
HTML Kodu
<div id="mesaj">
<p>
Felsefe, sözcük köken olarak Yunanca <a class="aciklama" href="#" data-title="sevgi anlamına gelir">"phileo"</a>
ve <a class="aciklama" href="#" data-title="bilgi, bilgelik anlamına gelir">"sophia"</a>
sözcüklerinden türeyen entelektüel faaliyet ve disiplindir.
</p>
</div>
Şimdi tasarımın güzel olmasını sağlamak için oluşturduğumuz div alanının CSS kodlarını yazalım. Tooltip ile bir ilgisi yoktur, tasarımla ilgilidir.
CSS Kodu
#mesaj
{
font-family: Calibri, Arial, sans-serif;
font-size: 20px;
width: 500px;
}
#mesaj a
{
text-decoration: none;
color: #000;
}
Ve şimdi bütün işleri yapan CSS kodlarını yazalım. after seçicisiyle tooltip penceresinin ayarlarını yapıyoruz. Ayrıca content ile data-title'da bulunan yazıyı çekiyoruz. İlk başta tooltip'i opacity'i 0 yaparak göstermiyoruz. hover::after ile mouse üzerine gelince opacity otomatik olarak 1 olacak ve tooltip açılacaktır. Buna ek olarak bazı açılış efektleri eklendi. Tooltip penceresinin yazının neresinde açılacağını kendinize göre ayarlayabilirsiniz.
CSS Kodu
.aciklama
{
position: relative;
display: inline-block;
}
.aciklama::after
{
content: attr(data-title);
position: absolute;
top: 100%;
left: -50%;
padding: 15px;
background: #eee;
color: #333;
opacity: 0;
word-wrap: break-word;
height: auto;
width: 200%;
-moz-box-shadow: 0 0 4px #222;
-webkit-box-shadow: 0 0 4px #222;
box-shadow: 0 0 4px #222;
pointer-events: none;
}
.aciklama:hover::after
{
opacity: 1;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
pointer-events: auto;
}
Örnek 2) Oluşturulan Görüntü
Bu örnekte ilkine ek olarak en üste bir şerit koyduk. Yine aynı şekilde "yazının" kelimesinin üzerine gelince ipucu penceresi açılıyor.
<div id="mesaj">
<p>
Ele aldığı ve işlediği konular göz önünde tutularak felsefe birçok disipline ayrılmıştır. O disiplinlerden bazılarını
<a class="aciklama" href="#" data-title="Ahlak Felsefesi, Din Felsefesi, Sanat Felsefesi, Varlık Felsefesi, Bilgi Felsefesi ...">bu yazının</a>
üzerine gelerek okuyabilirsiniz.
</p>
</div>
Tooltip ile alakası olmayan CSS tasarım kodlarını yazalım.
CSS Kodu
#mesaj
{
font-family: Calibri, Arial, sans-serif;
font-size: 20px;
width: 450px;
}
#mesaj a
{
text-decoration: none;
color: #000;
}
Ve şimdi asıl CSS kodlarını yazalım. Yine aynı şekilde after seçicisiyle tooltip penceresinin ayarlarını yapıyoruz ve tooltip'in üstünde görünecek şerit resmini yüklüyoruz. content ile data-title'da bulunan yazıyı çekiyoruz. İlk başta tooltip'i opacity'i 0 yaparak göstermiyoruz. hover::after ile mouse üzerine gelince opacity otomatik olarak 1 olacak ve tooltip açılacaktır. Bazı açılış efektleri eklendi. Tooltip penceresinin yazının neresinde açılacağını kendinize göre ayarlayabilirsiniz.
.aciklama
{
position: relative;
display: inline-block;
}
.aciklama::after
{
content: attr(data-title);
position: absolute;
top: -50px;
left: 80px;
padding: 45px 15px 15px 15px;
opacity: 0;
word-wrap: break-word;
background: #fff url(header.png) no-repeat;
background-size: 101% 25%;
font-size: 20px;
height: auto;
width: 400px;
-moz-box-shadow: 0 0 4px #222;
-webkit-box-shadow: 0 0 4px #222;
box-shadow: 0 0 4px #222;
pointer-events: none;
}
.aciklama:hover::after
{
opacity: 1;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
pointer-events: auto;
}
Son olarak bu örnekte kullanılan şerit resmini ve 3 tane farklı renkteki şerit resimlerini paylaşıyorum.
html5
css
html5 tooltip
css tooltip
html5 tooltip yapmak
css tooltip yapmak
html5 data özelliği
html5 data attribute
html5 data-title
html5 mouse ile üzerine gelince açılan pencere
css mouse ile üzerine gelince açılan pencere
css üzerine gelince açılan div
html5 üzerine gelince açılan div
Gökhan KARTAL
Admin
Ayben Şensoy
Admin
Mahmut Kerim
Admin
Enes Ergel
Admin
white-space: nowrap; // bu satırı ekleyin
word-wrap: break-word; // bu satırı silin
width: auto; // auto olarak değiştirin
Eren Sevinç
Admin
İkbal
Admin
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<br><br><br><br>
<div class="tooltip">Hover over me
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="tooltiptext">
</img>
</div>
</body>
</html>
Ana Sayfa
Paylaş
Oyla