Capturing mouse events

jQuery can be used to determine the position of the mouse pointer on screen. This recipe explains the technique for getting the mouse pointer position on screen. You will learn how to create a tooltip that will appear at current mouse pointer position on a particular element.

Getting ready

Keep the jQuery file ready to use with this recipe.

How to do it...

  1. Open a new file in your text editor and save it in chapter1 directory as mouse.html.
  2. Create a DIV with the ID tip and display set to none. This DIV will be displayed as tooltip. Create three more DIV elements and assign class hoverMe to the first and the last DIV. Write CSS styles for the DIV elements. The DIV that will be displayed as the tooltip must have position set to absolute. 
    <html>
  <head>
    <title>Mouse Movements</title>
    <style type="text/css">
      div
      {
        border:1px solid black;
        float:left;
        width:200px;
        height:200px;
        margin:10px;
        font-family:verdana,arial;
        font-size:14px;
      }

      div#tip 
      { 
        position:absolute;
        width:100px;
        height:auto;
      }
    </style>
  </head>
  <body>
  
    <div id="tip" style="display:none;">YaY! I am a tooltip</div>
    
    <div class="hoverMe">Hover me for a tooltip.</div>
    <div>This div will not display a tooltip</div>
    <div class="hoverMe">Hover me for a tooltip.</div>

  </body>
</html>
  3. Write the jQuery code that will display the tooltip when hovering over the DIV with class hoverMe. Two functions will be required for this. The first one will take care of showing and hiding the tooltip on hover with fade effect. The second function will actually set the position of tooltip and will move it as the mouse pointer moves. 
    <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function ()
  {
    $('.hoverMe').hover(
    function()
    {
      $('#tip').fadeIn('slow');
    },
    function()
    {
      $('#tip').fadeOut('slow');
    });
    
    $('.hoverMe').mousemove(function(e)
    {
      var topPosition = e.pageY+5;
      var leftPosition = e.pageX+5;
      $('#tip').css(
      {
        'top' :  topPosition+ 'px',
        'left' : leftPosition +'px'
      });
    });
  });
</script>
  4. Open your browser and run the mouse.html file. Hovering over the first and last DIV elements will display a tooltip with fade effect. The tooltip will also follow the mouse pointer as it moves.
    How to do it...

How it works...

We have used the hover() method on the DIV elements to show and hide the tooltip. This method attaches two event handlers to the specified element. The first event handler gets executed when the mouse pointer enters the element and the second one executes when the mouse pointer leaves that element. We have used the fadeIn() method to display the tooltip when a mouse pointer enters a DIV and the fadeout() method to hide the DIV as soon as the mouse pointer leaves it.

The most important thing now is to position the tooltip where the mouse pointer is. For this we attached an event handler mousemove on the DIV. As the name indicates, the handler function will execute when the mouse pointer is moving over the DIV. jQuery makes an event object available to the handler function, using which we can get the current mouse pointer position. The pageX property of the event gives us the cursor position relative to the left corner of the document. Similarly, the pageY property gets the mouse pointer position relative to the top of the window.

We have the mouse pointer coordinates with us now. We then assign the value of pageX and pageY to the CSS properties left and top of the tooltip DIV respectively.The value 5 has been added to each value to avoid the cursor from hiding part of the tooltip.

上一章目录下一章