tooltips restyling

libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx

@@ -38,11 +38,11 @@ export const RemixUiCheckbox = ({
 }: RemixUiCheckboxProps) => {
 
   const childJSXWithTooltip = (
-      <CustomTooltip
-          tooltipText={title}
-          tooltipId={`${name}Tooltip`}
-          placement={tooltipPlacement}
-        >
+    <CustomTooltip
+        tooltipText={title}
+        tooltipId={`${name}Tooltip`}
+        placement={tooltipPlacement}
+      >
       <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
         <input
           id={id}
@@ -58,8 +58,8 @@ export const RemixUiCheckbox = ({
           {label}
         </label>
       </div>
-      </CustomTooltip>
-    )
+    </CustomTooltip>
+  )
   const childJSX = (
     <div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: display, alignItems: 'center', visibility: visibility } as CSSProperties } onClick={onClick}>
         <input

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: {
@@ -8,25 +8,28 @@ const FileDecorationTooltip = (props: {
   index: number
 },
 ) => {
-    const getComments = function (fileDecoration: fileDecoration) {
-      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>
-        })
-      }
+  const getComments = function (fileDecoration: fileDecoration) {
+    if (fileDecoration.comment) {
+      const comments = Array.isArray(fileDecoration.comment) ? fileDecoration.comment : [fileDecoration.comment]
+      return comments.map((comment, index) => {
+        return <div className="bg-secondary text-left p-1 mx-1 my-0" key={index}>{comment}</div>
+      })
     }
+  }
 
-    return <OverlayTrigger
-      key={`overlaytrigger-${props.fileDecoration.path}-${props.index}`}
-      placement='auto'
-      overlay={
-        <Tooltip id={`error-tooltip-${props.fileDecoration.path}`}>
-          <>{getComments(props.fileDecoration)}</>
-        </Tooltip>
-      }
-    ><div>{props.icon}</div></OverlayTrigger>
+  return <OverlayTrigger
+    key={`overlaytrigger-${props.fileDecoration.path}-${props.index}`}
+    placement='auto'
+    overlay={
+      <Popover id={`popover-positioned-auto}`}>
+        <Popover.Content id={`error-tooltip-${props.fileDecoration.path}`} style={{minWidth: "fit-content"}} className={"text-wrap bg-secondary w-100 p-1 m-0"}>
+          <pre>{getComments(props.fileDecoration)}</pre>
+        </Popover.Content>
+       </Popover>
+    }
+  >
+    <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}>
-              {typeof tooltipText === 'string' ? (<span className={"text-wrap bg-secondary text-warning p-1 " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
+            <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 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.Title as="h3" className='bg-dark border-0'>{ title || 'Tooltip' }</Popover.Title>
-      <Popover.Content>
+  <Popover id="popover-basic" className='bg-danger border-danger'>
+    <Popover.Title as="h3" className='bg-warning border-0'>{ title || 'Tooltip' }</Popover.Title>
+      <Popover.Content className='bg-danger border-info'>
         { content }
       </Popover.Content>
   </Popover>