Rename class names

Author: denisborovikov

README.md

@@ -62,9 +62,9 @@ const Tooltip = ({ tooltip, children, ...props }) => (
   <TooltipTrigger
     {...props}   
     tooltip={({ getTooltipProps, tooltipRef, arrowStyle, arrowRef, arrowPlacement }) => (
-      <div className="popperBox" ref={tooltipRef} {...getTooltipProps()}>
+      <div className="tooltipContainer" ref={tooltipRef} {...getTooltipProps()}>
         <div
-          className="popperArrow"
+          className="tooltipArrow"
           ref={arrowRef}
           style={arrowStyle}
           data-placement={arrowPlacement}

src/styles.css

@@ -1,4 +1,4 @@
-.popperBox {
+.tooltipContainer {
   background-color: white;
   border-radius: 3px;
   border: 1px solid silver;
@@ -23,13 +23,13 @@
   z-index: 999;
 }
 
-.popperArrow {
+.tooltipArrow {
   height: 1rem;
   position: absolute;
   width: 1rem;
 }
 
-.popperArrow::before {
+.tooltipArrow::before {
   border-style: solid;
   content: '';
   display: block;
@@ -38,7 +38,7 @@
   width: 0;
 }
 
-.popperArrow::after {
+.tooltipArrow::after {
   border-style: solid;
   content: '';
   display: block;
@@ -48,78 +48,78 @@
   width: 0;
 }
 
-.popperArrow[data-placement*='bottom'] {
+.tooltipArrow[data-placement*='bottom'] {
   height: 1rem;
   left: 0;
   margin-top: -0.4rem;
   top: 0;
   width: 1rem;
 }
 
-.popperArrow[data-placement*='bottom']::before {
+.tooltipArrow[data-placement*='bottom']::before {
   border-color: transparent transparent silver transparent;
   border-width: 0 0.5rem 0.4rem 0.5rem;
   position: absolute;
   top: -1px;
 }
 
-.popperArrow[data-placement*='bottom']::after {
+.tooltipArrow[data-placement*='bottom']::after {
   border-color: transparent transparent white transparent;
   border-width: 0 0.5rem 0.4rem 0.5rem;
 }
 
-.popperArrow[data-placement*='top'] {
+.tooltipArrow[data-placement*='top'] {
   bottom: 0;
   height: 1rem;
   left: 0;
   margin-bottom: -1rem;
   width: 1rem;
 }
 
-.popperArrow[data-placement*='top']::before {
+.tooltipArrow[data-placement*='top']::before {
   border-color: silver transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0 0.5rem;
   position: absolute;
   top: 1px;
 }
 
-.popperArrow[data-placement*='top']::after {
+.tooltipArrow[data-placement*='top']::after {
   border-color: white transparent transparent transparent;
   border-width: 0.4rem 0.5rem 0 0.5rem;
 }
 
-.popperArrow[data-placement*='right'] {
+.tooltipArrow[data-placement*='right'] {
   height: 1rem;
   left: 0;
   margin-left: -0.7rem;
   width: 1rem;
 }
 
-.popperArrow[data-placement*='right']::before {
+.tooltipArrow[data-placement*='right']::before {
   border-color: transparent silver transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
 }
 
-.popperArrow[data-placement*='right']::after {
+.tooltipArrow[data-placement*='right']::after {
   border-color: transparent white transparent transparent;
   border-width: 0.5rem 0.4rem 0.5rem 0;
   left: 6px;
   top: 0;
 }
 
-.popperArrow[data-placement*='left'] {
+.tooltipArrow[data-placement*='left'] {
   height: 1rem;
   margin-right: -0.7rem;
   right: 0;
   width: 1rem;
 }
 
-.popperArrow[data-placement*='left']::before {
+.tooltipArrow[data-placement*='left']::before {
   border-color: transparent transparent transparent silver;
   border-width: 0.5rem 0 0.5rem 0.4em;
 }
 
-.popperArrow[data-placement*='left']::after {
+.tooltipArrow[data-placement*='left']::after {
   border-color: transparent transparent transparent white;
   border-width: 0.5rem 0 0.5rem 0.4em;
   left: 4px;