jQuery Tooltips | Lessoncup Programming Blog

Sunday, 3 November 2013

jQuery Tooltips

Tooltips are very useful and they play a huge role in your website we use them to show a information and large contents without creating any new design or take a new area in website. you can apply tooltips to any content like image, links, special words extra. we have plenty of plugin scripts to define tooltips, i have done this using jQuery Ui plugin script.



HTML

write the titles to images using title attribute this titles will appear as a tooltip while over the images 
<ul>
<li class="basic"><img src="joomla_logo.png" title="Powerful Content Management System!"></li>
<li class="basic1"><img src="seo.png" title="Search Engine Optimization"></li>
<li class="basic2"><img src="wp.png" title="WordPress is Hude Content Management System used for small and large CMS aplications"></li>
</ul>

CSS

create the custom style to tooltip and we apply this custom style class using jQuery
.tip{-webkit-box-shadow: 2px 2px 2px #666; width:180px;
box-shadow: 2px 2px 2px #666;margin:0; padding:0; position:absolute; color:#666; background-color:#FFF; padding:5px; border:solid #CCC 5px;}

ul{ list-style:none; margin:0; padding:0; margin-top:30px;}

li{ float:left; margin:32px; padding:5px; border:solid #CCC 5px;-webkit-box-shadow: 2px 2px 2px #666; width:180px;
box-shadow: 2px 2px 2px #666; width:180px; height:150px; background-color:#000; cursor:pointer;}

img{ width:175px;}


Javascript

here we can assign the tooltips to individual classes, by default the jQuery Ui library takes it's own class to style the tooltip, you can apply custom styles usingn this property tooltipClass: your class name, we can apply the effects to tooltips and we can track the tooltip by mouse.

Apply Tooltip using : $(selector).tooltip();

Apply Effects to Tolltip using : show:{effect:"effect name", duration : int}

Apply Tracking to Tooltip using: track:true

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script>
  
  $(document).ready(function(){
   
// applying custom class to tooltip   

$('.basic').tooltip({ tooltipClass: "tip" });

// adding effects to tooltip
   
   $('.basic1').tooltip({tooltipClass:"tip", show:{effect:"bounce",duration:500}, hide:{effect:"shake",duration:500}});

//track your tooltip by mouse
   
   $('.basic2').tooltip({track:true, tooltipClass: "tip"});
   
  });
  
</script>


Live Demo   Download Script

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons