Home/ Questions/Q 8844237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T11:26:09+00:00

I have difficult time figuring out, why this code doesn’t work. My intention is

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)

    • 0