Jquery tool tip - improvements for my function

Here is a little function I wrote for the title tag using jquery.

function tooltip(target_items, name){

  $(target_items).each(function(i){

        $("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
    var my_tooltip = $("#"+name+i);

        $(this).removeAttr("title").mouseover(function(){
        my_tooltip.css({display:"none"}).fadeIn(400);
                }).mousemove(function(kmouse){
        my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
                }).mouseout(function(){
        my_tooltip.fadeOut(400);                  
        });
  });

}

$(document).ready(function(){
       tooltip(".Tooltip", "tooltip");
});开发者_运维技巧

I am new to jquery, so bear with me...

The function works as I expected it to, but I am looking to improve it. There are a couple of issues.

1) When the cursor rapidly hovers over the trigger point it builds up an animation queue of the fadeIn and fadeOut process (I have tried using .stop() but don't know if I am doing it right)

2) If the browser window is not big enough and the tooltip function is called the tooltip will show outside of the browser view pane and not flip to the other side like normal titles do (I have no idea on how to do this!)

Any help would be greatly appreciated,

Thanks in advance

for your first question use hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html)

For your second question you need to calculate the height of the view window.height (out of memory) if the widget gets out of the window replace it.