How to create a fade-in fade-out hint box for an element

Here is the example of fade-in fade-out hint box for an element.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="">
<script src="">
.my_cust_css{border:1px solid #333; display:none; background:#09F; 
border-radius:5px; padding:5px; width:180px;}


<a href="#" class="jqury_hint" id="first" rev="hello this is test message.">chandan</a>
<br /><br /><br /><br />
<a href="#" class="jqury_hint"id="two" rev="hello this is test message123." 
style="float:right; margin-right:0px;">chandan</a><br /><br /><br /><br />

<a href="#" class="jqury_hint" id="three" rev="hello this is test message456." 
style="float:right; margin-right:330px;">chandan</a><br /><br /><br /><br />

<a href="#" class="jqury_hint" id="four" rev="hello this is test message456234." 
style="float:right; margin-right:630px;">chandan</a>

<div class="jqury_hint" id="fivr" rev="hello this is chandan." 
style="float:right; margin-right:830px;">chandan</div>


<script type="text/javascript">
		$('.jqury_hint').each(function (I) {
			var msg = $(this).attr('rev');
			var position = $(this).position();
			var left = position.left;
			$(this).after('<div class="my_cust_css" id="''_css">'+msg+'</span>');
			if(($(document).width()-left) < $('#''_css').width()){
				$('#''_css').css('left',$(document).width() - 
				($('#''_css').width() + 15));

Share and Enjoy

  • Facebook
  • Twitter
  • Google Plus
  • Live
  • Delicious
  • Digg
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
  • Instapaper
  • FriendFeed


  1. This is the best article I have read, thank you, I have learned a lot of knowledge in this area.