$(document).ready(function() { // bilgi_balonu only Text $('.bilgi_bal_ac').hover(function(){ // Üstüne gelince var title = $(this).attr('title'); $(this).data('tipText', title).removeAttr('title'); $('<p class="bilgi_balonu"></p>') .text(title) .appendTo('body') .fadeIn('slow'); }, function() { // Üstünde ayrılınca $(this).attr('title', $(this).data('tipText')); $('.bilgi_balonu').remove(); }).mousemove(function(e) { var mousex = e.pageX + 20; //Get X coordinates var mousey = e.pageY + 10; //Get Y coordinates $('.bilgi_balonu') .css({ top: mousey, left: mousex }) }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div class="dis_kutu"> Tüm Örnekler için | <a title="Daha Fazla Örnek İçin Tıklayın" class="bilgi_bal_ac" href="http://alpsonmez.com">alpsonmez.com</a> </div> <div class="dis_kutu"> <h2>Üstüne gelince açılacak paragraf</h2> <p title="Yazının üstüne gelince burdaki bilgi baloncuğu açıldı" class="bilgi_bal_ac">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus odio, elementum quis eleifend nec, accumsan et leo. Mauris tellus tellus, vehicula id pulvinar ut, egestas molestie odio. Suspendisse potenti.</p> <h2>Resim üzerine gelince açılacak bilgi baloncuğu</h2> <img src="image.jpg" class="bilgi_bal_ac" title="Resim bilgi balonu" /> <h2>İnput bilgi baloncuğu</h2> <input type="text" placeholder="İsminizi giriniz" class="bilgi_bal_ac" title="İsminizi giriniz"/> </div>
.dis_kutu {width: 460px; margin: 0 auto; overflow: hidden; height:auto; overflow:hidden;} .bilgi_balonu { display:none; position:absolute; border:1px solid #333; background-color:#161616; border-radius:5px; padding:5px 10px; color:#fff; font-size:12px Arial; border-bottom:4px solid #C03; }