tooltips restyling

libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-tooltip.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import { OverlayTrigger, Popover } from "react-bootstrap";
 import { fileDecoration } from "../../types";
 
 const FileDecorationTooltip = (props: {
@@ -12,7 +12,7 @@ const FileDecorationTooltip = (props: {
     if (fileDecoration.comment) {
       const comments = Array.isArray(fileDecoration.comment) ? fileDecoration.comment : [fileDecoration.comment]
       return comments.map((comment, index) => {
-          return <div key={index}>{comment}<br></br></div>
+        return <div className="bg-secondary text-left p-1 mx-1 my-0" key={index}>{comment}</div>
       })
     }
   }
@@ -21,12 +21,15 @@ const FileDecorationTooltip = (props: {
     key={`overlaytrigger-${props.fileDecoration.path}-${props.index}`}
     placement='auto'
     overlay={
-        <Tooltip id={`error-tooltip-${props.fileDecoration.path}`}>
+      <Popover id={`popover-positioned-auto}`}>
-          <>{getComments(props.fileDecoration)}</>
+        <Popover.Content id={`error-tooltip-${props.fileDecoration.path}`} style={{minWidth: "fit-content"}} className={"text-wrap bg-secondary w-100 p-1 m-0"}>
-        </Tooltip>
+          <pre>{getComments(props.fileDecoration)}</pre>
+        </Popover.Content>
+       </Popover>
     }
-    ><div>{props.icon}</div></OverlayTrigger>
+  >
+    <div>{props.icon}</div>
+  </OverlayTrigger>
 }
 
-
 export default FileDecorationTooltip;

libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Fragment } from 'react';
-import { OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
 import { CustomTooltipType } from '../../types/customtooltip'
 
 
@@ -8,7 +8,7 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
 
   if (typeof tooltipText !== 'string') {
     const newTooltipText = React.cloneElement(tooltipText, {
-      className: " bg-secondary text-danger text-wrap "
+      className: " bg-secondary text-wrap "
     })
     tooltipText = newTooltipText
   }
@@ -19,8 +19,8 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
         placement={placement}
         overlay={
           <Popover id={`popover-positioned-${placement}`}>
-            <Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap bg-secondary w-100 text-success " + tooltipClasses}>
+            <Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap bg-secondary w-100" + tooltipClasses}>
-              {typeof tooltipText === 'string' ? (<span className={"text-wrap bg-secondary text-warning p-1 " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
+              {typeof tooltipText === 'string' ? (<span className={"text-wrap bg-secondary p-1 " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
             </Popover.Content>
           </Popover>
         }

libs/remix-ui/panel/src/lib/plugins/panel-header.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from 'react' // eslint-disable-lin
 import { FormattedMessage } from 'react-intl'
 import { PluginRecord } from '../types'
 import './panel.css'
-import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 import { CustomTooltip } from '@remix-ui/helper'
 
 export interface RemixPanelProps {

libs/remix-ui/tooltip-popup/src/lib/tooltip-popup.tsx

@@ -4,9 +4,9 @@ import { TooltipPopupProps } from '../types'
 import './tooltip-popup.module.css'
 
 const popover = (title?: string, content?: string | React.ReactNode) => (
-  <Popover id="popover-basic" className='bg-light border-secondary'>
+  <Popover id="popover-basic" className='bg-danger border-danger'>
-    <Popover.Title as="h3" className='bg-dark border-0'>{ title || 'Tooltip' }</Popover.Title>
+    <Popover.Title as="h3" className='bg-warning border-0'>{ title || 'Tooltip' }</Popover.Title>
-      <Popover.Content>
+      <Popover.Content className='bg-danger border-info'>
         { content }
       </Popover.Content>
   </Popover>