Create an easy html tooltip with JQuery
This tutorial demonstrates on how-to create a basic tooltip with jquery. You can adjust the code below to match your needs.
Example Code
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script language="JavaScript" type="text/javascript">
<!--
$(document).ready(function() {
$(".tooltip_container").hover(
function (e) {
pagex = e.pageX;
pagey = e.pageY;
$(this).find('.tooltip').css("left", (pagex+12) + 'px');
$(this).find('.tooltip').css("top", (pagey+8) + 'px');
$(this).find('.tooltip').css("display", "block");
},
function () {
$(this).find('.tooltip').css("display", "none");
}
);
});
//-->
</script> <style type="text/css"> .tooltip_container { text-decoration: none; border-bottom: dashed 1px #666666; }
.tooltip { display: none; position: absolute; padding: 3px; background: #FFC; border: 1px solid #F60; text-align: left; font-size: 10px; color: #000; z-index: 99; font-family: Tahoma, Geneva, sans-serif; border-radius: 0px 3px 3px 3px; } </style> </head> <body> <a href="javascript:void(0);" class="tooltip_container">Hover me<span class="tooltip">Hello there!</span></a> </body> </html>
Output from the above example