fixed css around tooltip

Author: Olaussen

.npmignore

@@ -1 +1,2 @@
-/example
+/example
+/.github

README.md

@@ -17,7 +17,6 @@ npm i date-activity-graph
 
 ![image](https://user-images.githubusercontent.com/41127847/118047027-74175400-b37a-11eb-848d-65a0e954b90c.png)
 
-
 ### ✨Basic
 
 The only thing you need is to provide an array with objects having a date and the amount of hits (this will determine the color).
@@ -75,6 +74,7 @@ interface DateActivityGraphProps {
 ```
 
 The DateGraphColor type has this structure:
+
 ```ts
 type DateGraphColor = {
   amount: number;
@@ -102,11 +102,10 @@ const Root: React.FC = () => {
 import DateActivityGraph from "date-activity-graph";
 
 const Root: React.FC = () => {
-
-const colors: DateGraphColor[] = [
-  { amount: 5, color: "blue" },
-  { amount: 10, color: "red" },
-];
+  const colors: DateGraphColor[] = [
+    { amount: 5, color: "blue" },
+    { amount: 10, color: "red" },
+  ];
 
   return (
     <DateActivityGraph defaultColor="yellow" colors={colors} data={nodedata} />
@@ -120,12 +119,9 @@ const colors: DateGraphColor[] = [
 import DateActivityGraph from "date-activity-graph";
 
 const Root: React.FC = () => {
+  const labels: string[] = ["hit", "hits"]; // The first one will occur when the day only has one hit
 
-const labels: string[] = ["hit", "hits"] // The first one will occur when the day only has one hit
-
-  return (
-    <DateActivityGraph tooltipLabelNames={labels} data={nodedata} />
-  );
+  return <DateActivityGraph tooltipLabelNames={labels} data={nodedata} />;
 };
 ```
 

package.json

@@ -8,9 +8,10 @@
     "repository": "https://github.com/Angstboksen/date-activity-graph.git",
     "author": "Hauk Olaussen <[email protected]>",
     "license": "MIT",
+    "keywords": ["activity", "graph", "github", "date-activity", "date-graph"],
     "scripts": {
         "build": "yarn build:esm && yarn build:cjs",
-        "cleanbuild": "yarn build && copy src\\main.css lib\\esm ",
+        "cleanbuild": "yarn build && copy src\\main.css lib\\esm && copy src\\main.css lib\\cjs ",
         "build:esm": "tsc",
         "build:cjs": "tsc --module commonjs --outDir lib/cjs",
         "demostart": "yarn cleanbuild && cd example && yarn && yarn start"

src/components/GraphNode.tsx

@@ -9,7 +9,7 @@ export default class GraphNode extends Component<GraphNodeProps> {
   nodeSize: number;
   defaultColor: string;
   tooltipLabelNames: string[];
-  tooltipBackground: string
+  tooltipBackground: string;
   labelColor: string;
   onClick: Function | undefined;
 
@@ -23,7 +23,7 @@ export default class GraphNode extends Component<GraphNodeProps> {
     this.color = this.setColor(amount);
     this.defaultColor = this.props.defaultColor;
     this.tooltipLabelNames = this.props.tooltipLabelNames;
-    this.tooltipBackground = "black"
+    this.tooltipBackground = "black";
     this.labelColor = this.props.labelColor;
     this.onClick = this.props.onClick;
   }
@@ -57,7 +57,7 @@ export default class GraphNode extends Component<GraphNodeProps> {
       }}
       onClick={this.handleClick}
     >
-      <span
+      <p
         style={{ background: this.tooltipBackground, color: this.labelColor }}
         className="tooltiptext"
       >
@@ -68,7 +68,7 @@ export default class GraphNode extends Component<GraphNodeProps> {
             : this.tooltipLabelNames[1]}
         </strong>{" "}
         on {this.date}
-      </span>
+      </p>
     </div>
   );
 }

src/main.css

@@ -67,9 +67,10 @@ ul li {
 }
 
 .tooltip .tooltiptext {
+    display: inline-block;
     visibility: hidden;
-    width: 210px;
-    height: 20px;
+    min-width: 210px;
+    max-height: 35px;
     opacity: 0.8;
     text-align: center;
     padding: 5px;
@@ -85,19 +86,7 @@ ul li {
     display: block;
     position: absolute;
     left: 99px;
-    bottom: -52%;
-    width: 0;
-    height: 0;
-    border: 10px solid transparent;
-    border-top-color: black;
-}
-
-.tooltip .tooltiptext:after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 99px;
-    bottom: -52%;
+    bottom: -20px;
     width: 0;
     height: 0;
     border: 10px solid transparent;