jQuery Tooltips
14 years ago 12542 2806
n/a
So here’s the JS
$(document).ready(function(){ $('[rel=tooltip]').bind('mouseover', function(){ if ($(this).hasClass('ajax')) { var ajax = $(this).attr('ajax'); $.get(ajax, function(theMessage){ $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');}); }else{ var theMessage = $(this).attr('content'); $('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast'); } $(this).bind('mousemove', function(e){ $('div.tooltip').css({ 'top': e.pageY - ($('div.tooltip').height() / 2) - 5, 'left': e.pageX + 15 }); }); }).bind('mouseout', function(){ $('div.tooltip').fadeOut('fast', function(){ $(this).remove(); }); }); });
The HTML
The following combination of attributes can be added to any link to create a tooltip.
- rel=”tooltip” | this enables the link as a tooltip without this no tooltip would be show for that specific link
- class=”ajax” | if you want to call another page using ajax into the tooltip you need to add this class aswell as add the attribute ‘ajax’ with the link to the page you want to call
- ajax=”AJAX_URL_HERE” | this is where you specify the link to the page that you want to pull in using ajax.
- content=”Tooltip content” | this is where you put your main tooltip text including any image using regular html
<li><a href="#" alt="Text Tooltip" rel="tooltip" content="<span>Text Title</span><br/> This is an example of a text tooltip with jquery">Text Tooltip</a></li> <li><a href="#" alt="Image Tooltip" rel="tooltip" content="<span>Image Title</span><br/> <img src='http://papermashup.com/demos/jquery-gallery/images/t2.png' width='120' height='120' class='tooltip-image'/> This is an example of an image tooltip with jquery, with a little bit of text.<br/> Remember you can follow me on twitter just search: ashleyford">Image Tooltip</a></li> <li><a href="#" alt="Image Tooltip" rel="tooltip" content="<span>Iframe Tooltip</span><br/> <iframe src='http://google.com' width='250px' height='100px' frameborder='0' scrolling='0'></iframe>">Iframe Tooltip</a></li> <li><a href="#" class="ajax" alt="Image Tooltip" rel="tooltip" ajax="ajax.php?id=1823472">Ajax Tooltip</a></li>
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu