From 469dc562ebda16c8034479927e0ceffede169d71 Mon Sep 17 00:00:00 2001 From: Robert Konigsberg Date: Fri, 28 Dec 2012 23:01:54 -0500 Subject: [PATCH] jqueryify tooltip. --- experimental/palette/palette.js | 4 +-- experimental/palette/tooltip.js | 68 ++++++++++++++++------------------------- 2 files changed, 28 insertions(+), 44 deletions(-) diff --git a/experimental/palette/palette.js b/experimental/palette/palette.js index 8948333..d98ab15 100644 --- 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 --- 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 = $("
") + .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 = $("
") + .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 = $("
") + .attr("class", "type") + .appendTo(this.elem); - var getTopLeft = function(element) { - var x = element.offsetLeft; - var y = element.offsetTop; - element = element.offsetParent; + this.body = $("
") + .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"); } -- 2.7.4