Question

Here is my problem

I want to move a div from its position to the mouses position when i mouseover an element.

Almost like a “tooltip”, but when i mouseover it doesnt move. Here is the code:

$item.mouseover(function (){

//make visible
   $tooltip.show();

    //change left and top values to mouse values
   $tooltip.css("left","event.clientX + 'px'");
   $tooltip.css("top","200px");         
 });

The “event.clientX + ‘px'” doesn’t seem to work, is there anyway i can get this to work?
The top attribute is changed without problems but I cant get the mouse value to work.

how can i change the item.left & .top values to that of the mouses?

ty in advance!

-Thaiscorpion

edit:
Wow thats for the really super fast answers im gonna trythem right now thanx!!

Answer 1

You’re treating the event object as a string. So your call to $.css() would be more like this:

$item.mouseenter(function(event){
  $tooltip
    .show()
    .css({
      left: event.clientX + "px",
      top: '200px'
  }); 
});

Demo: http://jsbin.com/uzicek/5/edit