Skapa snyggare

tooltips med jQuery

$(document).ready(function(){

      // Mouse tracking
      $().mousemove(function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
      });

      // Width of window
      var windowwidth = $(document.body).width();

      $(".tooltip").live("mouseover", function(e){

        // Basic setup
        tooltip_xOffset = -10;
        tooltip_yOffset = 0;  

        // Save our title element        
        this.t = this.title;
        if (this.t){
          $(this).attr("title", "");
          var text = this.t.split(":");  // Split into sub-parts if any.

          // Add tooltip object to body
          $("").attr("id", "tooltip").text(text[0]).appendTo("body");

          if (text[1]){
            // If there is a colon, add it to thenext line
            $("<span>").addClass("subline").text(text[1]).appendTo("#tooltip");
          }

          // Positioning code
          var width = $("#tooltip").width();
          var top = (e.pageY - tooltip_xOffset);
          var left = (e.pageX + tooltip_yOffset);
          if ((left + width) > windowwidth){
            left = windowwidth - (width + 20);
          }
          $("#tooltip").css("top", top + "px").css("left", left + "px").fadeIn("fast");
          return false;
        }
      });

      // Code for removing the tooltip
      $(".tooltip").live("mouseout", function(){
        $(this).attr("title", this.t);
        $("#tooltip").remove();
      });  

      // Let's track the mouse when the tooltip is shown
      $(".tooltip").mousemove(function(e){
        var width = $("#tooltip").width();
        var top = (e.pageY - tooltip_xOffset);
        var left = (e.pageX + tooltip_yOffset);
        if ((left + width) > windowwidth){
          left = windowwidth - (width + 20);
        }
        $("#tooltip").css("top", top + "px").css("left", left + "px");
      });      
    });