fix FE tooltip

Author: Aniket-Engg

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -5968,6 +5968,13 @@ textarea.form-control-lg {
   width: var(--bs-popover-arrow-width);
   height: var(--bs-popover-arrow-height);
 }
+.custom-popover .popover-arrow {
+  position: absolute;
+  display: block;
+  width: 10px;
+  height: 5px;
+  margin: 0 5px;
+}
 .popover .popover-arrow::before, .popover .popover-arrow::after {
   position: absolute;
   display: block;

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -5953,6 +5953,13 @@ textarea.form-control-lg {
   width: var(--bs-popover-arrow-width);
   height: var(--bs-popover-arrow-height);
 }
+.custom-popover .popover-arrow {
+  position: absolute;
+  display: block;
+  width: 10px;
+  height: 5px;
+  margin: 0 5px;
+}
 .popover .popover-arrow::before, .popover .popover-arrow::after {
   position: absolute;
   display: block;

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -320,7 +320,7 @@ export const FlatTree = (props: FlatTreeProps) => {
             <Popover id='popover-basic'
               placement='top'
               ref={ref}
-              className='popover'
+              className='custom-popover'
               style={
                 {
                   position: 'fixed',
@@ -329,7 +329,7 @@ export const FlatTree = (props: FlatTreeProps) => {
                   minWidth: 'fit-content'
                 }
               }>
-              <Popover.Body className='text-wrap p-1 px-2 bg-secondary w-100'>
+              <Popover.Body className='text-wrap p-1 px-2 bg-body w-100'>
                 {mouseOverTarget && mouseOverTarget.path}
               </Popover.Body>
             </Popover>