Araştırdığım sitede basit ve detaylı kod olarak 2 ayrı kod vermiş.İlk kodun sizi tatmin etmeyeceğini bildiğim için 2.kodu sizlerle paylaşacağım.
Öncelikle kodumuzun ne işe yaradığına kısaca bir kez daha değinelim.Bu kod sayesinde tanımladığımız yazının üzerine geldiğimizde ufak bir pencere daha açılıyor ve tanımladığımız yazı ve resim beliriyor.
Dilediğiniz gibi değiştirebileceğiniz kodları veriyorum ;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8″ />
<title>Nazım Mert Bilgi jQuery Bilgi Baloncukları</title>
<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js></script>
<script type=text/javascript src=easyTooltip.js></script>
<script type=text/javascript>
$(document).ready(function(){
$(#link).easyTooltip({
useElement: icerik
});
});
</script>
<style>
#easyTooltip{
margin:0 10px 1em 0;
width:250px;
padding:8px;
background:#fcfcfc;
border:1px solid #e1e1e1;
line-height:130%
}
#easyTooltip h3{
margin:0 0 .5em 0;
font:14px Arial bold, Helvetica, sans-serif;
text-transform:uppercase
}
#easyTooltip p{margin:0 0 .5em 0}
#easyTooltip img{
background:#fff;
padding:1px;
border:1px solid #e1e1e1;
float:left;
margin-right:10px
}
#icerik{display:none}
</style>
</head>
<body>
<a href=# id=link>Nazım Mert Bilgi ?</a>
<div id=icerik>
<h3>Nazım Mert Bilgi</h3>
<img src=https://lh4.googleusercontent.com/-waABi549iow/AAAAAAAAAAI/AAAAAAAAAEs/uEHmIJmvXPo/s120-c/photo.jpg />
<p>nazimmertbilgi.com Her telden yazılar içeren bir blog.</p>
<ul>
<li>WordPress ve</li>
<li>Teknoloji</li>
</ul>
</div>
</body>
</html>
