CODEWITHSUNDEEP
jquery
user1031742
user1031742

Reputation: 424

simple tooltips created using jquery 1.3.2

I have difficult time figuring out, why this code doesn't work. My intention is to display a message when user cliks on tooltip div. After moving mouse cursor out of the div, the tooltip should close. I need the simplest possble way of displaying a message on a single page. I need to use jquery 1.3.2.Can anybody help? Thank you

<html>
<head>
<script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $('.wrapper').live('click', showBox).live('mouseleave', hideBox);

    function showBox(e){
        var x = e.pageX + 20;
        var y = e.pageY + 20;
        $('.tooltip').fadeIn();
        $('.tooltip').offset({ left: x, top: y });
    }
});

function hideBox(){
    $('.tooltip').fadeOut();
}

</script>
<style>
  .div{ margin:10px;padding:12px;
         border:2px solid #666;
         width:60px;
       }
  </style>
</head>
<body>
<div class="wrapper">sometext</div>
<div class="tooltip">tooltip1</div>
</body>
</html>

EDIT: here is the working code by Juan Mendes http://jsfiddle.net/HUG2Z/3/

Upvotes: 0

Views: 2085

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

I can't figure out why you're using live on mouseleave. Without seeing the rest of the code, it doesn't make sense to use it on click either. live is deprecated in version 1.7 for a reason, so you should not use it, unless you really understand what it's doing and its drawbacks.

The following code works http://jsfiddle.net/HUG2Z/1/

$(document).ready(function(){

    $('.somefield').click(showBox).mouseleave(hideBox);

    function showBox(e){
        var x = e.pageX + 20;
        var y = e.pageY + 20;
        $('.tooltip').fadeIn();
        $('.tooltip').offset({ left: x, top: y });
    }

    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

If this is now what you want, just change the jsfiddle to better represent your scenario and post it on your question (not as a comment here)

Upvotes: 2

Related Questions