fix(Popover): nested popover - css fix (#13750)

* fix(Popover): added the css only to the direct children

* fix(Popover): fix caret when isTabTip

* Update packages/react/src/components/Popover/Popover.stories.js

* Update packages/react/src/components/Popover/Popover.stories.js

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/styles/scss/components/popover/_popover.scss

@@ -130,7 +130,9 @@ $popover-caret-height: custom-property.get-var(
     pointer-events: auto;
   }
 
-  .#{$prefix}--popover--open .#{$prefix}--popover-content {
+  .#{$prefix}--popover--open
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content {
     display: block;
   }
 
@@ -144,7 +146,9 @@ $popover-caret-height: custom-property.get-var(
     content: '';
   }
 
-  .#{$prefix}--popover--open .#{$prefix}--popover-content::before {
+  .#{$prefix}--popover--open
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-content::before {
     display: block;
   }
 
@@ -160,11 +164,18 @@ $popover-caret-height: custom-property.get-var(
     will-change: transform;
   }
 
-  .#{$prefix}--popover--open.#{$prefix}--popover--caret
-    .#{$prefix}--popover-caret {
+  .#{$prefix}--popover--open
+    > .#{$prefix}--popover
+    > .#{$prefix}--popover-caret {
     display: block;
   }
 
+  .#{$prefix}--popover--tab-tip
+    .#{$prefix}--popover
+    .#{$prefix}--popover-caret {
+    display: none;
+  }
+
   //-----------------------------------------------------------------------------
   // Bottom
   //-----------------------------------------------------------------------------