[Pkg-javascript-commits] [d3-tip.js] 65/277: flesh out top and bottom orients

[bhuvan krishna]

This is an automated email from the git hooks/post-receive script.

bhuvan-guest pushed a commit to branch master
in repository d3-tip.js.

commit 03f20b03c5ec78531e47d3d4c8254ac25660750c
Author: Justin Palmer <justin at github.com>
Date:   Fri Apr 5 17:42:20 2013 -0700

    flesh out top and bottom orients
---
 examples/bars.html    |  3 +++
 examples/circles.html | 11 +++++++++--
 src/d3.tip.js         | 31 +++++++++++++++++++++++++------
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/examples/bars.html b/examples/bars.html
index 4c7f6cf..af952ce 100644
--- a/examples/bars.html
+++ b/examples/bars.html
@@ -63,6 +63,9 @@
     var tip = d3.svg.tip()
       .attr('class', 'd3-tip')
       .text(function(d) { return d.total })
+      .orient(function(d) {
+        return d3.shuffle(['top', 'bottom', 'left', 'right'])[0]
+      })
 
     var w = 800,
         h = 300,
diff --git a/examples/circles.html b/examples/circles.html
index c6376b2..9d3dc66 100644
--- a/examples/circles.html
+++ b/examples/circles.html
@@ -9,6 +9,8 @@
   <style type="text/css">
   body {
     padding: 40px;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+    font-size: 12px;
   }
 
   .d3-tip {
@@ -31,11 +33,16 @@
 
   circle {
     fill: #ccc;
-    fill-opacity: 0.8;
+    fill-opacity: 0.6;
     stroke: #bbb;
     stroke-width: 1px;
   }
 
+  circle:hover {
+    fill: #bbb;
+    stroke: #999;
+  }
+
   .rule {
     stroke-width: 1px;
     stroke: #c00;
@@ -52,7 +59,7 @@
 
     var tip = d3.svg.tip()
       .attr('class', 'd3-tip')
-      .text(function(d) { return d })
+      .text(function(d) { return d.toFixed(2) })
 
     var w = 1000,
         h = 1000,
diff --git a/src/d3.tip.js b/src/d3.tip.js
index ef66b13..842b541 100644
--- a/src/d3.tip.js
+++ b/src/d3.tip.js
@@ -5,6 +5,7 @@ d3.svg.tip = function() {
   var orient    = 'top',
       offset    = d3_svg_offset,
       text      = d3_svg_text,
+      orient    = 'top',
       node      = init_node(),
       svg       = null,
       container = null,
@@ -18,21 +19,39 @@ d3.svg.tip = function() {
   }
 
   function d3_svg_offset() {
-    return [0, 0];
+    return [0, 0]
   }
 
   function d3_svg_text() {
-    return ' ';
+    return ' '
   }
 
   tip.show = function(v) {
     var bbox = get_screen_bbox(),
-        content = text.apply(this, arguments)
+        content = text.apply(this, arguments),
+        side = orient.apply(this, arguments),
+        top, left;
 
+    console.log(side)
     node.innerHTML = content
     node.style.display = 'block'
-    node.style.left = (bbox.n.x - node.offsetWidth / 2) + 'px'
-    node.style.top  = (bbox.n.y - node.offsetHeight) + 'px'
+
+    switch(side) {
+      case 'bottom':
+        top  = (bbox.s.y - (node.offsetHeight / 2)) + 'px'
+        left = (bbox.s.x - node.offsetWidth / 2) + 'px'
+        break
+      case 'left':
+        top  = (bbox.w.y - node.offsetHeight / 2) + 'px'
+        left = bbox.w.x + 'px'
+      default:
+        top  = (bbox.n.y - node.offsetHeight) + 'px'
+        left = (bbox.n.x - node.offsetWidth / 2) + 'px'
+        break
+    }
+
+    node.style.top = top
+    node.style.left = left
   }
 
   tip.hide = function(v) {
@@ -63,7 +82,7 @@ d3.svg.tip = function() {
   // Returns tip or oreint
   tip.orient = function(v) {
     if (!arguments.length) return orient;
-    orient = v;
+    orient = v == null ? v : d3.functor(v);
     return tip;
   };
 

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/d3-tip.js.git