jQuery - Cant use clientX to change a css attribute

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 setting the css property to event.clientXpx literally. Put event.clientX outside the quotes:

 $tooltip.css("left", event.clientX + "px");

Answer 2

Here is a redone version of your code: http://jsfiddle.net/maniator/EzdBx/

var $tooltip = $('#tooltip')

$('.hover').hover(function(event) {
    //make visible
    $tooltip.show();
    //change left and top values to mouse values
    $(this).bind('mousemove', function(event) {
        $tooltip.css("left", event.clientX);
        $tooltip.css("top", event.clientY);
    })
}, function() {
    $tooltip.hide();
});

css:

#tooltip {
    display: none;
    position: absolute;
    /* anything you want here and below */
    width: 50px;
    background: blue;
}

Answer 3

replace:

$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");         
});

with:

$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");         
 });

Answer 4

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

Answer 5

您需要更改其position属性，可能还要更改z-index 。