diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 5f568040..eec3337a 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -6,7 +6,7 @@ import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
 import { computeTooltipPosition } from '../../utils/compute-positions'
 import styles from './styles.module.css'
-import type { IPosition, ITooltip } from './TooltipTypes'
+import type { IPosition, ITooltip, PlacesType } from './TooltipTypes'
 
 const Tooltip = ({
   // props
@@ -45,6 +45,7 @@ const Tooltip = ({
   const tooltipArrowRef = useRef<HTMLElement>(null)
   const tooltipShowDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
   const tooltipHideDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const [actualPlacement, setActualPlacement] = useState(place)
   const [inlineStyles, setInlineStyles] = useState({})
   const [inlineArrowStyles, setInlineArrowStyles] = useState({})
   const [show, setShow] = useState(false)
@@ -228,6 +229,7 @@ const Tooltip = ({
       if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
         setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
       }
+      setActualPlacement(computedStylesData.place as PlacesType)
     })
   }
 
@@ -465,6 +467,7 @@ const Tooltip = ({
       if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
         setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
       }
+      setActualPlacement(computedStylesData.place as PlacesType)
     })
   }, [show, activeAnchor, content, html, place, offset, positionStrategy, position])
 
@@ -516,11 +519,18 @@ const Tooltip = ({
     <WrapperElement
       id={id}
       role="tooltip"
-      className={classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
-        [styles['show']]: canShow,
-        [styles['fixed']]: positionStrategy === 'fixed',
-        [styles['clickable']]: clickable,
-      })}
+      className={classNames(
+        'react-tooltip',
+        styles['tooltip'],
+        styles[variant],
+        className,
+        `react-tooltip__place-${actualPlacement}`,
+        {
+          [styles['show']]: canShow,
+          [styles['fixed']]: positionStrategy === 'fixed',
+          [styles['clickable']]: clickable,
+        },
+      )}
       style={{ ...externalStyles, ...inlineStyles }}
       ref={tooltipRef}
     >
diff --git a/src/test/__snapshots__/tooltip-attributes.spec.js.snap b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
index 848cdcf6..15c3ba94 100644
--- a/src/test/__snapshots__/tooltip-attributes.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-attributes.spec.js.snap
@@ -9,7 +9,7 @@ exports[`tooltip attributes basic tooltip 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -30,7 +30,7 @@ exports[`tooltip attributes tooltip with place 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-right"
     role="tooltip"
   >
     Hello World!
diff --git a/src/test/__snapshots__/tooltip-props.spec.js.snap b/src/test/__snapshots__/tooltip-props.spec.js.snap
index 03fb4c21..fda5432e 100644
--- a/src/test/__snapshots__/tooltip-props.spec.js.snap
+++ b/src/test/__snapshots__/tooltip-props.spec.js.snap
@@ -8,7 +8,7 @@ exports[`tooltip props basic tooltip 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -27,7 +27,7 @@ exports[`tooltip props clickable tooltip 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip undefined"
+    class="react-tooltip react-tooltip__place-top undefined"
     role="tooltip"
     style="left: 5px; top: -10px;"
   >
@@ -50,7 +50,7 @@ exports[`tooltip props tooltip with custom position 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -79,7 +79,7 @@ exports[`tooltip props tooltip with delay show 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -98,7 +98,7 @@ exports[`tooltip props tooltip with float 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     Hello World!
@@ -117,7 +117,7 @@ exports[`tooltip props tooltip with html 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-top"
     role="tooltip"
   >
     <span>
@@ -141,7 +141,7 @@ exports[`tooltip props tooltip with place 1`] = `
     Lorem Ipsum
   </span>
   <div
-    class="react-tooltip"
+    class="react-tooltip react-tooltip__place-right"
     role="tooltip"
   >
     Hello World!
diff --git a/src/test/utils.spec.js b/src/test/utils.spec.js
index 1f37a885..8c4cde1a 100644
--- a/src/test/utils.spec.js
+++ b/src/test/utils.spec.js
@@ -12,7 +12,7 @@ describe('compute positions', () => {
       tooltipArrowReference: null,
     })
 
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
+    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {}, place: 'top' })
   })
 
   test('empty tooltip reference element', async () => {
@@ -23,7 +23,7 @@ describe('compute positions', () => {
       tooltipArrowReference: null,
     })
 
-    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {} })
+    expect(value).toEqual({ tooltipStyles: {}, tooltipArrowStyles: {}, place: 'top' })
   })
 
   test('empty tooltip arrow reference element', async () => {
@@ -41,6 +41,7 @@ describe('compute positions', () => {
         left: '5px',
         top: '10px',
       },
+      place: 'bottom',
     })
   })
 
@@ -65,6 +66,7 @@ describe('compute positions', () => {
         left: '5px',
         top: '-10px',
       },
+      place: 'top',
     })
   })
 })
diff --git a/src/utils/compute-positions.ts b/src/utils/compute-positions.ts
index c978b280..78c71138 100644
--- a/src/utils/compute-positions.ts
+++ b/src/utils/compute-positions.ts
@@ -14,11 +14,11 @@ export const computeTooltipPosition = async ({
     // elementReference can be null or undefined and we will not compute the position
     // eslint-disable-next-line no-console
     // console.error('The reference element for tooltip was not defined: ', elementReference)
-    return { tooltipStyles: {}, tooltipArrowStyles: {} }
+    return { tooltipStyles: {}, tooltipArrowStyles: {}, place }
   }
 
   if (tooltipReference === null) {
-    return { tooltipStyles: {}, tooltipArrowStyles: {} }
+    return { tooltipStyles: {}, tooltipArrowStyles: {}, place }
   }
 
   const middleware = middlewares
@@ -51,7 +51,7 @@ export const computeTooltipPosition = async ({
         [staticSide]: '-4px',
       }
 
-      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle }
+      return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement }
     })
   }
 
@@ -59,9 +59,9 @@ export const computeTooltipPosition = async ({
     placement: 'bottom',
     strategy,
     middleware,
-  }).then(({ x, y }) => {
+  }).then(({ x, y, placement }) => {
     const styles = { left: `${x}px`, top: `${y}px` }
 
-    return { tooltipStyles: styles, tooltipArrowStyles: {} }
+    return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement }
   })
 }