Brought back old tooltip transitions and box shadow...

but only if you supply the 'with-transitions' CSS class. Also changed the nv-point.hover dot to a smaller, darker stroke.
11 years ago · 94efcbad66
parent 1621b83e7a
commit 94efcbad66
9 changed files with 35 additions and 32 deletions
--- a/examples/bulletChart.html
+++ b/examples/bulletChart.html
@ -12,7 +12,7 @@ body {

 <br> <br> <br> <br> <br>

-<div class="gallery" id="chart"></div>
+<div class="gallery with-transitions" id="chart"></div>

 <script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
--- a/examples/cumulativeLineChart.html
+++ b/examples/cumulativeLineChart.html
@ -34,12 +34,12 @@ text {
      <a href="../test/stackedAreaChartTest.html">Stacked Area</a>
      <a href="cumulativeLineChart.html">Cumulative Line</a>
  </div>
-  <div id="chart1" class='chart'>
-    <strong>Chart with new tooltips and guide line</strong>
+  <div id="chart1" class='chart with-transitions'>
+    <strong>Chart with new tooltips and guide line (with-transitions)</strong>
    <svg></svg>
  </div>
-  <div id="chart2" class='chart'>
-    <strong>Chart with old tooltips</strong>
+  <div id="chart2" class='chart with-transitions'>
+    <strong>Chart with old tooltips (with-transitions)</strong>
    <svg></svg>
  </div>

--- a/examples/historicalBarChart.html
+++ b/examples/historicalBarChart.html
@ -12,7 +12,7 @@ text {
 }

 </style>
-<body>
+<body class='with-transitions'>

 <svg id="test1"></svg>

--- a/examples/linePlusBarChart.html
+++ b/examples/linePlusBarChart.html
@ -28,7 +28,7 @@ text {
 </style>
 <body>

-  <div id="chart1">
+  <div id="chart1" class='with-transitions'>
    <svg> </svg>
  </div>

--- a/examples/scatterChart.html
+++ b/examples/scatterChart.html
@ -41,7 +41,7 @@ div {
 <body>

 <div id="offsetDiv">
-  <div id="test1" class="chartWrap">
+  <div id="test1" class="with-transitions chartWrap">
    <svg></svg>
  </div>
 </div>
--- a/src/nv.d3.css
+++ b/src/nv.d3.css
@ -25,8 +25,21 @@
  font-family: Arial;
  font-size: 13px;
  text-align: left;
+  pointer-events: none;

-  /*transition: opacity 500ms linear;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/*Give tooltips that old fade in transition by
+    putting a "with-transitions" class on the container div.
+*/
+.nvtooltip.with-transitions, .with-transitions .nvtooltip {
+  transition: opacity 500ms linear;
  -moz-transition: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear;

@ -34,24 +47,13 @@
  -moz-transition-delay: 500ms;
  -webkit-transition-delay: 500ms;

-*/
-
- /* -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
-
-  pointer-events: none;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none; */
 }

 .nvtooltip.x-nvtooltip,
@ -391,18 +393,18 @@ svg .title {
 }


-.nvd3 .nv-groups .nv-point {
- /* transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+.with-transitions .nvd3 .nv-groups .nv-point {
+  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
-  -webkit-transition: stroke-width 0ms linear, stroke-opacity 0ms linear;*/
+  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;

 }

 .nvd3.nv-scatter .nv-groups .nv-point.hover,
 .nvd3 .nv-groups .nv-point.hover {
-  stroke-width: 20px;
-  fill-opacity: .5 !important;
-  stroke-opacity: .5 !important;
+  stroke-width: 7px;
+  fill-opacity: .95 !important;
+  stroke-opacity: .95 !important;
 }


@ -499,11 +501,12 @@ svg .title {
  fill-opacity: 0;
 }

+/*
 .nvd3.nv-stackedarea .nv-groups .nv-point.hover {
  stroke-width: 20px;
  stroke-opacity: .75;
  fill-opacity: 1;
-}
+}*/



--- a/src/tooltip.js
+++ b/src/tooltip.js
@ -120,7 +120,7 @@ window.nv.tooltip.* also has various helper methods.
        

            container.node().innerHTML = newContent;
-            container.style("top",0).style("left",0);
+            container.style("top",0).style("left",0).style("opacity",0);
            return container.node();
        }

--- a/test/lineChartTest.html
+++ b/test/lineChartTest.html
@ -18,8 +18,8 @@
        Example of chart with many series', and new interactive guideline plus tooltip.
        <svg></svg>
      </div>
-      <div class='chart half' id='chart2'>
-        Chart with old tooltip style.
+      <div class='chart half with-transitions' id='chart2'>
+        Chart with old tooltip style (with-transitions).
        <svg></svg>
      </div>
      <div class='chart half' id='chart3'>
--- a/test/stackedAreaChartTest.html
+++ b/test/stackedAreaChartTest.html
@ -12,7 +12,7 @@
      <a href="../examples/cumulativeLineChart.html">Cumulative Line</a>
  </div>
  <div class='chart full' id='chart1'>Full chart example with new tooltip and guideline<svg></svg></div>
-  <div class='chart half' id='chart2'>Chart with old tooltips<svg></svg></div>
+  <div class='chart half with-transitions' id='chart2'>Chart with old tooltips (with-transitions)<svg></svg></div>
  <div class='chart half' id='chart3'>Chart with single point<svg></svg></div>
  <div class='chart half' id='chart4'>Chart with two points<svg></svg></div>
  <div class='chart half' id='chart5'>Chart with 'holes'<svg></svg></div>