0
Я пытаюсь показать всплывающую подсказку над ярлыком при наведении курсора. Я последовал за этим Tooltip tutorial, чтобы получить эту работу. В этом руководстве используется JQuery 1.4.2, и мой проект построен на JQuery 1.11.2. Всплывающая подсказка работает с 1.4.2, но не с 1.11.2.Всплывающая подсказка не работает с JQuery 1.11.2
Поддерживается ли поддержка всплывающей подсказки в JQuery? Я что-то пропустил?
<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>
У вас есть опечатка в последнем селекторе (дополнительная '' '), она должна быть:' $ ("span # authentication-password-tooltip, label # username") '. Если вы исправите это, он отлично работает: http://jsfiddle.net/15sk4wks/ –
Также просто FYI, всякий раз, когда вы получаете какой-то JS-код, который не работает, первое, что нужно сделать, это проверить консоль на наличие ошибки. –