Breaking News
You are here : Home / Web Design / Javascript/Jquery / Custom Tooltips using Jquery
Jquery Custom Tooltip

Custom Tooltips using Jquery

Custom Tooltips using Jquery

hello Guys!  Custom ToolsTips using  jquery are very nice and easy to implement.This custom tooltips can be used for displaying text and also  Image on link while the hover action.All we need is to get the mouse co-ordinates then accordingly show the our Custom Jquery Tooltip.You just cant imagine how easy is this Tooltip to implement ,even a beginner level can understand the code.

First of all we crate a regular html link as below:

Link Markup for Custom jquery ToolTips:

You can clearly see we have two classes ‘ttip_container’ and ‘tooltip’ . the content inside ttip_container is what we going to see and the other one tooltip class is hidden using the css display property.lets take a look at css code:

Jquery ToolTip Css

As you see the css is small can simple.from code it should be clear that we have hidden inner tooltip class.now the main jquery magic comes .what it does is on hover function looks for the inner class tooltip and we use the jquery show function to show the tooltip and on call back means mouse out the hide function hides the content inside tooltip class.lets take a look at Jquery code:

Jquery Custom Tooltip script:

That was our all Jquery code for the Custom Tooltips.You might have noticed the few checks in the jquery mouse move method. to check the tootip ion accordance with the window height and width.All the code is pretty clean and easy.
I have included the Demo and the source code.Below are the links:

Demo Jquery Custom Tooltip Download Jquery Custom Tooltip

 

Thanks For visiting Designaeon

[separator /]

Tags : , , ,

Leave a Reply

Want to join the discussion ? Feel Free to contribute !

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">