jqueryify tooltip.

diff --git a/experimental/palette/palette.js b/experimental/palette/palette.js
index 8948333..d98ab15 100644 (file)
--- a/experimental/palette/palette.js
+++ b/experimental/palette/palette.js
@@ -115,9 +115,7 @@ Palette.prototype.create = function(parentElement) {
 
       row.mouseover(function(source, title, type, body) {
           return function() {
-            // source[0] is un-jquerying.
-            // TODO(konigsberg): when tooltip is jquery, dump this.
-            palette.tooltip.show(source[0], title, type, body);
+            palette.tooltip.show(source, title, type, body);
           };
         } (row, opt, type, Dygraph.OPTIONS_REFERENCE[opt].description))
         .mouseout(function() { palette.tooltip.hide(); })

diff --git a/experimental/palette/tooltip.js b/experimental/palette/tooltip.js
index a1d8856..d084f82 100644 (file)
--- a/experimental/palette/tooltip.js
+++ b/experimental/palette/tooltip.js
@@ -27,54 +27,40 @@
 
 function Tooltip(parent) {
   if (!parent) {
-    parent = document.getElementsByTagName("body")[0];
+    parent = $("body")[0];
   }
-  this.elem = Tooltip.createChild("div", parent);
-  this.title = Tooltip.createChild("div", this.elem);
-  this.elem.className = "tooltip";
-  this.title.className = "title";
-  this.type = Tooltip.createChild("div", this.elem);
-  this.type.className = "type";
-  this.body = Tooltip.createChild("div", this.elem);
-  this.body.className = "body";
-  this.hide();
-}
+  this.elem = $("<div>")
+      .attr("class", "tooltip")
+      .appendTo(parent);
 
-Tooltip.createChild = function(type, parentElement, className) {
-  var element = document.createElement(type);
-  parentElement.appendChild(element);
-  if (className) {
-    element.className = className;
-  }
-  return element;
-};
+  this.title = $("<div>")
+      .attr("class", "title")
+      .appendTo(this.elem);
 
-Tooltip.prototype.show = function(source, title, type, body) {
-  this.title.innerHTML = title;
-  this.body.innerHTML = body;
-  this.type.textContent = type; // textContent for arrays.
+  this.type = $("<div>")
+      .attr("class", "type")
+      .appendTo(this.elem);
 
-  var getTopLeft = function(element) {
-    var x = element.offsetLeft;
-    var y = element.offsetTop;
-    element = element.offsetParent;
+  this.body = $("<div>")
+      .attr("class", "body")
+      .appendTo(this.elem);
 
-    while(element != null) {
-      x = parseInt(x) + parseInt(element.offsetLeft);
-      y = parseInt(y) + parseInt(element.offsetTop);
-      element = element.offsetParent;
-    }
-    return [y, x];
-  }
+  this.hide();
+}
+
+Tooltip.prototype.show = function(source, title, type, body) {
+  this.title.html(title);
+  this.body.html(body);
+  this.type.text(type); // textContent for arrays.
 
-  this.elem.style.height = source.style.height;
-  this.elem.style.width = "280";
-  var topLeft = getTopLeft(source);
-  this.elem.style.top = parseInt(topLeft[0] + source.offsetHeight) + 'px';
-  this.elem.style.left = parseInt(topLeft[1] + 10) + 'px';
-  this.elem.style.visibility = "visible";
+  var offset = source.offset();
+  this.elem.css({
+    "width" : "280",
+    "top" : parseInt(offset.top + source[0].offsetHeight) + 'px',
+    "left" : parseInt(offset.left + 10) + 'px',
+    "visibility" : "visible"});
 }
 
 Tooltip.prototype.hide = function() {
-  this.elem.style.visibility = "hidden";
+  this.elem.css("visibility", "hidden");
 }