diff --git a/src/components/TestAnalyticsPie.css b/src/components/TestAnalyticsPie.css
index 29698fb..f2b304e 100644
--- a/src/components/TestAnalyticsPie.css
+++ b/src/components/TestAnalyticsPie.css
@@ -54,4 +54,38 @@
    font-size: x-small;
    font-weight: 400;
    padding: 0.5em;
+}
+
+.category-tooltip {
+   max-width: 200px;
+   /* padding: 0.5rem 0.75rem; */
+   color: #fff;
+   text-align: center;
+   background-color: #000;
+   border-radius: 0.25rem;
+   line-height: 1rem;
+   font-weight: 400;
+   padding-top: 0.5rem;
+   padding-bottom: 0.5rem;
+   padding-left: 0.75rem;
+   padding-right: 0.75rem;
+   word-wrap: break-word;
+   /* position: absolute; */
+   /* will-change: transform; */
+   /* top: 0px; */
+   /* left: 0px; */
+   /* transform: translate3d(590px, 403px, 0px); */
+   font-family: "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+   font-style: normal;
+   line-height: 1.5;
+   /* text-align: left; */
+   /* text-align: start; */
+   text-shadow: none;
+   text-transform: none;
+   letter-spacing: normal;
+   word-break: normal;
+   white-space: normal;
+   word-spacing: normal;
+   line-break: auto;
+   font-size: 0.75rem;
 }
\ No newline at end of file
diff --git a/src/components/TestAnalyticsPie.js b/src/components/TestAnalyticsPie.js
index 3a9435b..d950b0e 100644
--- a/src/components/TestAnalyticsPie.js
+++ b/src/components/TestAnalyticsPie.js
@@ -64,26 +64,26 @@ class TestAnalyticsPie extends Component {
             .style("position", "absolute")
             .style("z-index", "10")
             .style("visibility", "hidden")
-            .style("background", "#fff")
+            // .style("background", "#fff")
             .text("a simple tooltip");
 
         arc.append("path")
             .attr("d", path)
             .attr("fill", function (d) { return color(d.data.category); })
             .on('mouseover', (event, d) => {
-                tooltip.text(`${d.data.category}: ${d.data.count}, ${Math.floor(100 * d.data.count / data.reduce((a, c) => a + c.count, 0)).toFixed(2)}%`);
+                tooltip.text(`${d.data.category} => count: ${d.data.count}, percent: ${Math.floor(100 * d.data.count / data.reduce((a, c) => a + c.count, 0)).toFixed(2)}%`);
                 return tooltip
                     .style("visibility", "visible")
-                    .style("font-size", "0.65em")
+                    // .style("font-size", "0.65em")
                     .style("font-weight", "600")
                     .style("z-index", "9999")
-                    .style("width", "200px")
-                    .style("height", "50px")
+                    // .style("width", "200px")
+                    // .style("height", "50px")
                     .style("display", "flex")
                     .style("align-items", "center")
                     .style("justify-content", "center")
-                    .style("border-radius", "3px")
-                    .style("box-shadow", "1px 1px 1px 1px #888888");
+                    // .style("border-radius", "3px")
+                    // .style("box-shadow", "1px 1px 1px 1px #888888");
             })
             .on('mouseout', (event, d) => {
                 return tooltip