Bu yazımda jquery ile tooltip uygulamasını kullanmayı göstereceğim. Bu uygulamayı kullanarak yaptığımız uygulamaları daha görsel daha kullanışlı hale

Bu yazımda jquery ile tooltip uygulamasını kullanmayı göstereceğim. Bu uygulamayı kullanarak yaptığımız uygulamaları daha görsel daha kullanışlı hale getirebiliriz. Jquery ile artık daha görsel uygulamalar üzerinde çalışıyorum. Bu da bunlardan bir tanesi. Sizlerle paylaşarak, sizlere farklı bir yöntem sunmayı amaçladım. Umarım işinize yarar. Şimdi nasıl kullanacağımıza bakalım.

Öncelikle bu uygulama için jquery kütüphanesine ve tooltip için gerekli javascript kütüphanelerini, tooltip için gerekli css dosyalarını kullanacağımız sayfaya ekliyoruz. 

Daha sonra sayfamızda tooltip kullanacağımız kontrolleri belirlediğimiz, tooltip'in hangi event ile çalışacağını ve bunun gibi özellikleri belirttiğimiz script kodlarımız şöyle olacak:
 

$(document).ready(function()
{    
	$('#kutular input').tooltip({tooltip:'#tooltip',mode:'hover',onShow:onShow});
});
function onShow(sender)
{    
	var $tooltip = $('#tooltip');    
	if($(window).width()-sender.target.offset().left <= $tooltip.width()) 
	{        
		$('.tooltiptextleft',$tooltip).removeClass('tooltiptextleft').addClass('tooltiptextright');        
		$('.tooltiparrowleft',$tooltip).removeClass('tooltiparrowleft').addClass('tooltiparrowright');    
	}    
	else
	{        
		$('.tooltiptextright',$tooltip).removeClass('tooltiptextright').addClass('tooltiptextleft');        
		$('.tooltiparrowright',$tooltip).removeClass('tooltiparrowright').addClass('tooltiparrowleft');    
	}
}

 

Script kodlarımız böyle. Örnkete kullandığım html kodlar ve tooltip için gerekli html kodlar ise şöyle olacak:
 

<div id="kutular">  
	<div>    
		<input id="Text1" type="text" />  
	</div>  
	<div>    
		<input id="Text2" type="text" />  
	</div>  
	<div>    
		<input id="Text3" type="text" />  
	</div>
</div>
<div id="tooltip" class="tooltiparea">  
	<div class="tooltiptextleft">    
		<div class="tooltiptext2">      
			<div class="tooltiptext3">        
				<p class="image">          
					<img src="comment_warning_48.png" alt="avatar" />        
				</p>        
				<p class="content">          
					Gerekli !        
				</p>       
			</div>    
		</div>  
	</div>  
	<div class="pointer">    
		<img class="tooltiparrowleft" src="comment-arrow-flip.gif" alt=" " align="bottom"        style="border-width: 0px;" />  
	</div>
</div>

 

Tüm yapacaklarımız bu kadar artık tooltip uygulamasını kullanabiliriz. Örnek ekran görüntüsü ise şöyle:


İyi Çalışmalar!

İlgili Makaleler

Bu yazıya 0 yorum yapılmış.

Yorum Gönder