groundfloor-react-ui 1.2.2 → 1.2.4

package/components/Tooltip/Tooltip.js

@@ -9,356 +9,356 @@ import getDefaultStyles from '../constants/utils';
 /**
  * Primary UI component for user interaction
  */
- const TooltipContainer = styled.div`
+const TooltipContainer = styled.div`
  background-color: ${({ theme }) => theme.bgColor};
  border: 1px solid ${({ theme }) => theme.bgColor};
  color: ${({ theme }) => theme.black},
  ${({ inBuiltCss, type, customStylesTPContainer }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tooltip-container']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tooltip-container']) {
-                     tempObj[property] = inBuiltCss['tooltip-container'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPContainer };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tooltip-container']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tooltip-container']) {
+                    tempObj[property] = inBuiltCss['tooltip-container'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPContainer };
+        }
+    }}
  
      &[data-popper-placement*='bottom'] .tooltip-arrow {
          ${({ inBuiltCss, type, customStylesTPAbottom }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-bottom-arrow']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-bottom-arrow']) {
-                     tempObj[property] = inBuiltCss['tp-cont-bottom-arrow'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPAbottom };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-bottom-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-bottom-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAbottom };
+        }
+    }}
      }
  
  &[data-popper-placement*='bottom'] .tooltip-arrow::before {
     border-color: transparent transparent ${({ theme }) => theme.bgColor} transparent;
      ${({ inBuiltCss, type, customStylesTPAbottomBefore, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-bottom-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-bottom-arrow-before']) {
-                     tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-before'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             let customStyles = customStylesTPAbottomBefore ? customStylesTPAbottomBefore : {
-                 borderColor: `transparent transparent ${theme.primary['primary-1']} transparent`,
-             }
-             return { ...tempObj, ...customStyles };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-bottom-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-bottom-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-before'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            let customStyles = customStylesTPAbottomBefore ? customStylesTPAbottomBefore : {
+                borderColor: `transparent transparent ${theme.primary['primary-1']} transparent`,
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
  }
  
  &[data-popper-placement*='bottom'] .tooltip-arrow::after {
     border-color: transparent transparent ${({ theme }) => theme.bgColor} transparent;
      ${({ inBuiltCss, type, customStylesTPAbottomAfter, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-bottom-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-bottom-arrow-after']) {
-                     tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-after'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             let customStyles = customStylesTPAbottomAfter ? customStylesTPAbottomAfter : {
-                 borderColor: `transparent transparent ${theme.primary['primary-1']} transparent`,
-             }
-             return { ...tempObj, ...customStyles };
- 
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-bottom-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-bottom-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-bottom-arrow-after'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            let customStyles = customStylesTPAbottomAfter ? customStylesTPAbottomAfter : {
+                borderColor: `transparent transparent ${theme.primary['primary-1']} transparent`,
+            }
+            return { ...tempObj, ...customStyles };
+
+        }
+    }}
  }
  &[data-popper-placement*='top'] .tooltip-arrow {
      ${({ inBuiltCss, type, customStylesTPAtop }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-top-arrow']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-top-arrow']) {
-                     tempObj[property] = inBuiltCss['tp-cont-top-arrow'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPAtop };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-top-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-top-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-top-arrow'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAtop };
+        }
+    }}
  }
  &[data-popper-placement*='top'] .tooltip-arrow::before {
     border-color: ${({ theme }) => theme.bgColor}  transparent transparent transparent;
      ${({ inBuiltCss, type, customStylesTPAtopBefore, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-top-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-top-arrow-before']) {
-                     tempObj[property] = inBuiltCss['tp-cont-top-arrow-before'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             let customStyles = customStylesTPAtopBefore ? customStylesTPAtopBefore : {
-                 borderColor: `${theme.primary['primary-1']} transparent transparent transparent`,
-             }
-             return { ...tempObj, ...customStyles };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-top-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-top-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-top-arrow-before'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            let customStyles = customStylesTPAtopBefore ? customStylesTPAtopBefore : {
+                borderColor: `${theme.primary['primary-1']} transparent transparent transparent`,
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
  }
  &[data-popper-placement*='top'] .tooltip-arrow::after {
     border-color: ${({ theme }) => theme.bgColor}  transparent transparent transparent;
      ${({ inBuiltCss, type, customStylesTPAtopAfter, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-top-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-top-arrow-after']) {
-                     tempObj[property] = inBuiltCss['tp-cont-top-arrow-after'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
- 
-             let customStyles = customStylesTPAtopAfter ? customStylesTPAtopAfter : {
-                 borderColor: `${theme.primary['primary-1']} transparent transparent transparent`,
-             }
-             return { ...tempObj, ...customStyles};
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-top-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-top-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-top-arrow-after'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+
+            let customStyles = customStylesTPAtopAfter ? customStylesTPAtopAfter : {
+                borderColor: `${theme.primary['primary-1']} transparent transparent transparent`,
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
  }
  &[data-popper-placement*='right'] .tooltip-arrow {
      ${({ inBuiltCss, type, customStylesTPAright }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-right-arrow']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-right-arrow']) {
-                     tempObj[property] = inBuiltCss['tp-cont-right-arrow'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPAright };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-right-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-right-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-right-arrow'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAright };
+        }
+    }}
  }
  &[data-popper-placement*='right'] .tooltip-arrow::before {
     border-color: transparent ${({ theme }) => theme.bgColor} transparent transparent;
      ${({ inBuiltCss, type, customStylesTPArightBefore, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-right-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-right-arrow-before']) {
-                     tempObj[property] = inBuiltCss['tp-cont-right-arrow-before'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             let customStyles = customStylesTPArightBefore ? customStylesTPArightBefore : {
-                 borderColor: `transparent ${theme.primary['primary-1']} transparent transparent`,
-             }
-             return { ...tempObj, ...customStyles };
- 
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-right-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-right-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-right-arrow-before'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            let customStyles = customStylesTPArightBefore ? customStylesTPArightBefore : {
+                borderColor: `transparent ${theme.primary['primary-1']} transparent transparent`,
+            }
+            return { ...tempObj, ...customStyles };
+
+        }
+    }}
  }
  &[data-popper-placement*='right'] .tooltip-arrow::after {
     border-color: transparent ${({ theme }) => theme.bgColor} transparent transparent;
      ${({ inBuiltCss, type, customStylesTPArightAfter, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-right-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-right-arrow-after']) {
-                     tempObj[property] = inBuiltCss['tp-cont-right-arrow-after'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             let customStyles = customStylesTPArightAfter ? customStylesTPArightAfter : {
-                 borderColor: `transparent ${theme.primary['primary-1']} transparent transparent`,
-             }
-             return { ...tempObj, ...customStyles };
- 
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-right-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-right-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-right-arrow-after'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            let customStyles = customStylesTPArightAfter ? customStylesTPArightAfter : {
+                borderColor: `transparent ${theme.primary['primary-1']} transparent transparent`,
+            }
+            return { ...tempObj, ...customStyles };
+
+        }
+    }}
  }
  &[data-popper-placement*='left'] .tooltip-arrow {
      ${({ inBuiltCss, type, customStylesTPAleft }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-left-arrow']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-left-arrow']) {
-                     tempObj[property] = inBuiltCss['tp-cont-left-arrow'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPAleft };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-left-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-left-arrow']) {
+                    tempObj[property] = inBuiltCss['tp-cont-left-arrow'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAleft };
+        }
+    }}
  }
  &[data-popper-placement*='left'] .tooltip-arrow::before {
     
     border-color: transparent transparent transparent ${({ theme }) => theme.bgColor};
      ${({ inBuiltCss, type, customStylesTPAleftBefore, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-left-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-left-arrow-before']) {
-                     tempObj[property] = inBuiltCss['tp-cont-left-arrow-before'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             let customStyles = customStylesTPAleftBefore ? customStylesTPAleftBefore : {
-                 borderColor: `transparent transparent transparent ${theme.primary['primary-1']} `,
-             }
-             return { ...tempObj, ...customStyles };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-left-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-left-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tp-cont-left-arrow-before'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            let customStyles = customStylesTPAleftBefore ? customStylesTPAleftBefore : {
+                borderColor: `transparent transparent transparent ${theme.primary['primary-1']} `,
+            }
+            return { ...tempObj, ...customStyles };
+        }
+    }}
  }
  &[data-popper-placement*='left'] .tooltip-arrow::after {
     border-color: transparent transparent transparent ${({ theme }) => theme.bgColor};
      ${({ inBuiltCss, type, customStylesTPAleftAfter, theme }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tp-cont-left-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tp-cont-left-arrow-after']) {
-                     tempObj[property] = inBuiltCss['tp-cont-left-arrow-after'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             let customStyles = customStylesTPAleftAfter ? customStylesTPAleftAfter : {
-                 borderColor: `transparent transparent transparent  ${theme.primary['primary-1']} `,
-             }
-             return { ...tempObj, ...customStyles };
- 
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tp-cont-left-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tp-cont-left-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tp-cont-left-arrow-after'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            let customStyles = customStylesTPAleftAfter ? customStylesTPAleftAfter : {
+                borderColor: `transparent transparent transparent  ${theme.primary['primary-1']} `,
+            }
+            return { ...tempObj, ...customStyles };
+
+        }
+    }}
  }
  `;
- 
- const TooltipArrow = styled.div`
+
+const TooltipArrow = styled.div`
  
  ${({ inBuiltCss, type, customStylesTPArrow }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tooltip-arrow']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tooltip-arrow']) {
-                     tempObj[property] = inBuiltCss['tooltip-arrow'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPArrow };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tooltip-arrow']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tooltip-arrow']) {
+                    tempObj[property] = inBuiltCss['tooltip-arrow'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPArrow };
+        }
+    }}
  
  
  &::before{
      ${({ inBuiltCss, type, customStylesTPAbefore }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tooltip-arrow-before']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tooltip-arrow-before']) {
-                     tempObj[property] = inBuiltCss['tooltip-arrow-before'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPAbefore };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tooltip-arrow-before']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tooltip-arrow-before']) {
+                    tempObj[property] = inBuiltCss['tooltip-arrow-before'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAbefore };
+        }
+    }}
      }
  
      &::after{
          ${({ inBuiltCss, type, customStylesTPAafter }) => {
-         if (inBuiltCss) {
-             let tempObj = {};
-             if (inBuiltCss['tooltip-arrow-after']) {
-                 for (const property in inBuiltCss['common']) {
-                     tempObj[property] = inBuiltCss['common'][property]
-                 }
-                 for (const property in inBuiltCss['tooltip-arrow-after']) {
-                     tempObj[property] = inBuiltCss['tooltip-arrow-after'][property]
-                     delete inBuiltCss.common[property]
-                 }
-             }
-             return { ...tempObj, ...customStylesTPAafter };
-         }
-     }}
+        if (inBuiltCss) {
+            let tempObj = {};
+            if (inBuiltCss['tooltip-arrow-after']) {
+                for (const property in inBuiltCss['common']) {
+                    tempObj[property] = inBuiltCss['common'][property]
+                }
+                for (const property in inBuiltCss['tooltip-arrow-after']) {
+                    tempObj[property] = inBuiltCss['tooltip-arrow-after'][property]
+                    delete inBuiltCss.common[property]
+                }
+            }
+            return { ...tempObj, ...customStylesTPAafter };
+        }
+    }}
          }
  `;
- 
- 
- const TooltipContent = styled.div`
+
+
+const TooltipContent = styled.div`
  
  background-color: ${({ theme }) => theme.primary['primary-1']};
  ${({ inBuiltCss, defaultTooltipContentStyle }) => {
-     return getDefaultStyles(inBuiltCss, defaultTooltipContentStyle);
-   }}
+        return getDefaultStyles(inBuiltCss, defaultTooltipContentStyle);
+    }}
      // custom styles
      ${({ customContentStyle }) => customContentStyle}
  `
- 
- const Header = styled.div`
+
+const Header = styled.div`
  ${({ inBuiltCss, defaultTooltipHeaderStyle }) => {
-     return getDefaultStyles(inBuiltCss, defaultTooltipHeaderStyle);
-   }}
+        return getDefaultStyles(inBuiltCss, defaultTooltipHeaderStyle);
+    }}
      // custom styles
      ${({ customHeaderStyle }) => customHeaderStyle}
  `
- 
- const Body = styled.div`
+
+const Body = styled.div`
  ${({ inBuiltCss, defaultTooltipBodyStyle }) => {
-     return getDefaultStyles(inBuiltCss, defaultTooltipBodyStyle);
-   }}
+        return getDefaultStyles(inBuiltCss, defaultTooltipBodyStyle);
+    }}
      // custom styles
      ${({ customBodyStyle }) => customBodyStyle}
  `
- 
- const Footer = styled.div`
+
+const Footer = styled.div`
  `
 
 export const Tooltip = ({
@@ -452,11 +452,11 @@ export const Tooltip = ({
                         customStylesTPAafter={customStylesTPAafter}
                     />
                     <TooltipContent defaultTooltipContentStyle={'popOver-Content'} theme={activeTheme} inBuiltCss={defaultStyles}
-        {...props} customContentStyle={customContentStyle}>
+                        {...props} customContentStyle={customContentStyle}>
                         <Header defaultTooltipHeaderStyle={'popOver-header'} theme={activeTheme} inBuiltCss={defaultStyles}
-        {...props} customHeaderStyle={customHeaderStyle}>{headerTooltip}</Header>
+                            {...props} customHeaderStyle={customHeaderStyle}>{headerTooltip}</Header>
                         <Body defaultTooltipBodyStyle={'popOver-body'} theme={activeTheme} inBuiltCss={defaultStyles}
-        {...props} customBodyStyle={customBodyStyle}>{contentTooltip}</Body>
+                            {...props} customBodyStyle={customBodyStyle}>{contentTooltip}</Body>
                         <Footer >{footerTooltip}</Footer>
                     </TooltipContent>
                 </TooltipContainer>
@@ -478,7 +478,7 @@ Tooltip.propTypes = {
     /**
      * The Body element to put inside the tooltip
      */
-     contentTooltip: PropTypes.any,
+    contentTooltip: PropTypes.any,
     /**
      * The footer element to put inside the tooltip
      */
@@ -500,12 +500,12 @@ Tooltip.propTypes = {
     /**
      * Object to pass custom style to the Tooltip container
      */
-     customHeaderStyle: PropTypes.object,
+    customHeaderStyle: PropTypes.object,
     /**
      * Object to pass custom style to the Tooltip container
      */
-     customBodyStyle: PropTypes.object,
-    
+    customBodyStyle: PropTypes.object,
+
     /**
      * Object to pass custom style to the Tooltip container
      */
@@ -577,5 +577,5 @@ Tooltip.defaultProps = {
     headerTooltip: 'Lovely tooltip title',
     contentTooltip: '',
     footerTooltip: '',
-    customStylesTPContainer:{border: 'none'},
+    customStylesTPContainer: { border: 'none' },
 };