groundfloor-react-ui 1.0.21 → 1.2.0

package/components/Tooltip/Tooltip.js

@@ -1,292 +1,365 @@
 import PropTypes from 'prop-types';
 import React from "react";
 import { usePopperTooltip } from 'react-popper-tooltip';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import getDefaultStyles from '../constants/utils';
 
 /**
  * Primary UI component for user interaction
  */
-const TooltipContainer = styled.div`
-${({ 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 };
-        }
-    }}
-
-    &[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 };
-        }
-    }}
-    }
-
-&[data-popper-placement*='bottom'] .tooltip-arrow::before {
-    ${({ inBuiltCss, type, customStylesTPAbottomBefore }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAbottomBefore };
-        }
-    }}
-}
-
-&[data-popper-placement*='bottom'] .tooltip-arrow::after {
-    ${({ inBuiltCss, type, customStylesTPAbottomAfter }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAbottomAfter };
-        }
-    }}
-}
-&[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 };
-        }
-    }}
-}
-&[data-popper-placement*='top'] .tooltip-arrow::before {
-    ${({ inBuiltCss, type, customStylesTPAtopBefore }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAtopBefore };
-        }
-    }}
-}
-&[data-popper-placement*='top'] .tooltip-arrow::after {
-    ${({ inBuiltCss, type, customStylesTPAtopAfter }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAtopAfter };
-        }
-    }}
-}
-&[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 };
-        }
-    }}
-}
-&[data-popper-placement*='right'] .tooltip-arrow::before {
-    ${({ inBuiltCss, type, customStylesTPArightBefore }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPArightBefore };
-        }
-    }}
-}
-&[data-popper-placement*='right'] .tooltip-arrow::after {
-    ${({ inBuiltCss, type, customStylesTPArightAfter }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPArightAfter };
-        }
-    }}
-}
-&[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 };
-        }
-    }}
-}
-&[data-popper-placement*='left'] .tooltip-arrow::before {
-    ${({ inBuiltCss, type, customStylesTPAleftBefore }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAleftBefore };
-        }
-    }}
-}
-&[data-popper-placement*='left'] .tooltip-arrow::after {
-    ${({ inBuiltCss, type, customStylesTPAleftAfter }) => {
-        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]
-                }
-            }
-            return { ...tempObj, ...customStylesTPAleftAfter };
-        }
-    }}
-}
-`;
-
-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 };
-        }
-    }}
-
-
-&::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 };
-        }
-    }}
-    }
-
-    &::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 };
-        }
-    }}
-        }
-`;
+ 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 };
+         }
+     }}
+ 
+     &[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 };
+         }
+     }}
+     }
+ 
+ &[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 };
+         }
+     }}
+ }
+ 
+ &[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 };
+ 
+         }
+     }}
+ }
+ &[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 };
+         }
+     }}
+ }
+ &[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 };
+         }
+     }}
+ }
+ &[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};
+         }
+     }}
+ }
+ &[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 };
+         }
+     }}
+ }
+ &[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 };
+ 
+         }
+     }}
+ }
+ &[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 };
+ 
+         }
+     }}
+ }
+ &[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 };
+         }
+     }}
+ }
+ &[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 };
+         }
+     }}
+ }
+ &[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 };
+ 
+         }
+     }}
+ }
+ `;
+ 
+ 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 };
+         }
+     }}
+ 
+ 
+ &::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 };
+         }
+     }}
+     }
+ 
+     &::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 };
+         }
+     }}
+         }
+ `;
+ 
+ 
+ const TooltipContent = styled.div`
+ 
+ background-color: ${({ theme }) => theme.primary['primary-1']};
+ ${({ inBuiltCss, defaultTooltipContentStyle }) => {
+     return getDefaultStyles(inBuiltCss, defaultTooltipContentStyle);
+   }}
+     // custom styles
+     ${({ customContentStyle }) => customContentStyle}
+ `
+ 
+ const Header = styled.div`
+ ${({ inBuiltCss, defaultTooltipHeaderStyle }) => {
+     return getDefaultStyles(inBuiltCss, defaultTooltipHeaderStyle);
+   }}
+     // custom styles
+     ${({ customHeaderStyle }) => customHeaderStyle}
+ `
+ 
+ const Body = styled.div`
+ ${({ inBuiltCss, defaultTooltipBodyStyle }) => {
+     return getDefaultStyles(inBuiltCss, defaultTooltipBodyStyle);
+   }}
+     // custom styles
+     ${({ customBodyStyle }) => customBodyStyle}
+ `
+ 
+ const Footer = styled.div`
+ `
 
 export const Tooltip = ({
     inBuiltCss,
@@ -310,9 +383,17 @@ export const Tooltip = ({
     customStylesTPArrow,
     customStylesTPAbefore,
     customStylesTPAafter,
+    customTooltipContentStyle,
+    customContentStyle,
+    customHeaderStyle,
+    customBodyStyle,
+    headerTooltip,
+    footerTooltip,
     ...props
 }) => {
 
+    const activeTheme = useTheme() || defaultThemeColor;
+
     const popperOptions = {
         modifiers: [
             {
@@ -346,6 +427,7 @@ export const Tooltip = ({
             {visible && (
                 <TooltipContainer
                     inBuiltCss={defaultStyles}
+                    theme={activeTheme}
                     ref={setTooltipRef}
                     {...getTooltipProps({ className: 'tooltip-container' })}
                     customStylesTPContainer={customStylesTPContainer}
@@ -369,7 +451,14 @@ export const Tooltip = ({
                         customStylesTPAbefore={customStylesTPAbefore}
                         customStylesTPAafter={customStylesTPAafter}
                     />
-                    {contentTooltip}
+                    <TooltipContent defaultTooltipContentStyle={'popOver-Content'} theme={activeTheme} inBuiltCss={defaultStyles}
+        {...props} customContentStyle={customContentStyle}>
+                        <Header defaultTooltipHeaderStyle={'popOver-header'} theme={activeTheme} inBuiltCss={defaultStyles}
+        {...props} customHeaderStyle={customHeaderStyle}>{headerTooltip}</Header>
+                        <Body defaultTooltipBodyStyle={'popOver-body'} theme={activeTheme} inBuiltCss={defaultStyles}
+        {...props} customBodyStyle={customBodyStyle}>{contentTooltip}</Body>
+                        <Footer >{footerTooltip}</Footer>
+                    </TooltipContent>
                 </TooltipContainer>
             )}
         </>
@@ -383,9 +472,17 @@ Tooltip.propTypes = {
      */
     contentTrigger: PropTypes.any,
     /**
-     * The element to put inside the tooltip
+     * The header element to put inside the tooltip
      */
-    contentTooltip: PropTypes.any,
+    headerTooltip: PropTypes.any,
+    /**
+     * The Body element to put inside the tooltip
+     */
+     contentTooltip: PropTypes.any,
+    /**
+     * The footer element to put inside the tooltip
+     */
+    footerTooltip: PropTypes.any,
     /**
      * Object to customize the behaviour of the tooltip
      * For more reference see: 
@@ -400,6 +497,15 @@ Tooltip.propTypes = {
      * https://popper.js.org/docs/v2/tutorial/
      */
     settings: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip container
+     */
+     customHeaderStyle: PropTypes.object,
+    /**
+     * Object to pass custom style to the Tooltip container
+     */
+     customBodyStyle: PropTypes.object,
+    
     /**
      * Object to pass custom style to the Tooltip container
      */
@@ -468,5 +574,8 @@ Tooltip.propTypes = {
 
 Tooltip.defaultProps = {
     contentTrigger: <div>Trigger</div>,
-    contentTooltip: <div>I am the tooltip</div>,
+    headerTooltip: 'Lovely tooltip title',
+    contentTooltip: '',
+    footerTooltip: '',
+    customStylesTPContainer:{border: 'none'},
 };