I am trying to show a tooltip over a label on move hover. I followed this Tooltip tutorial to get thet work. This tutorial uses JQuery 1.4.2 and my project is build on JQuery 1.11.2. The tooltip works on 1.4.2 but not on 1.11.2.
Is the support for tooltip is removed in JQuery ? Am I missing any ?
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
#hint{
cursor:pointer;
}
.tooltip{
margin:8px;
padding:8px;
border:1px solid blue;
background-color:yellow;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<h1>jQuery tooltips example</h1>
<label id="username">Username : </label><input type="text" / size="50">
<span id="authentication-password-tooltip">Password(?)</span>
<script type="text/javascript">
$(document).ready(function() {
var changeTooltipPosition = function(event) {
var tooltipX = event.pageX - 8;
var tooltipY = event.pageY + 8;
$('div.tooltip').css({top: tooltipY, left: tooltipX});
};
var showTooltip = function(event) {
$('div.tooltip').remove();
$('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
.appendTo('body');
changeTooltipPosition(event);
};
var hideTooltip = function() {
$('div.tooltip').remove();
};
$("span#authentication-password-tooltip,label#username'").bind({
mousemove : changeTooltipPosition,
mouseenter : showTooltip,
mouseleave: hideTooltip
});
});
</script>
</body>
</html>
Remove the ' from your $("span#authentication-password-tooltip,label#username'"); it's breaking the script.
Some general advice: as pointed out in the comments, you should always check the console first when you have a JavaScript error. Also, 1.4.2 is very old now (more than 5 years). A lot has changed, so you should try to look for more current tutorials in the future.