tooltip on slider

tooltip on slider

  1.                 $("#sw").slider({
                        orientation    : "horizontal",
                        range        : "min",
                        min            : 0,
                        max            : 2000,
                        value        : $("#i1").width(),
                        start        : function(event,ui) {
                                        $("#tooltip").css("display","block");
                        },
                        slide        : function (event, ui) {    
                                        $("#i1").css({"width": $("#sw").slider("value")});
                                                                           
                                        $('#tooltip').css({
                                               left:  e.pageX + 20,
                                               top:   e.pageY + 20
                                        });
                                        $("#tooltip").text(ui.value);
                               
                        },   
                                   
                        stop        : function(event,ui) {
                                           $("#tooltip").css("display","none");
                        }
                   
                    });
























  1. <div id="tooltip">mouse tooltip</div>
  2.        <style>
                #tooltip {
                    position: absolute;
                    float: left;
                    display:none;
                }
            </style>





div element does not follow mouse (handle) why ?

and when i move other slider div element is showing just "mouse tooltip" not value