finish custom tooltip refactor. Test in panel header

libs/remix-ui/helper/src/index.ts

@@ -2,4 +2,5 @@ export * from './lib/remix-ui-helper'
 export * from './lib/bleach'
 export * from './lib/helper-components'
 export * from './lib/components/PluginViewWrapper'
-export * from './lib/components/custom-dropdown'
+export * from './lib/components/custom-dropdown'
+export * from './lib/components/custom-tooltip'

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

@@ -4,14 +4,14 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { CustomTooltipType } from '../../types/customtooltip'
 
 
-function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText }: CustomTooltipType) {
+export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText }: CustomTooltipType) {
 
   return (
     <Fragment>
       <OverlayTrigger
         placement={placement}
         overlay={
-          <Tooltip id={tooltipId ?? `${tooltipText}Tooltip`} className={tooltipClasses}>
+          <Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
             <span>{tooltipText}</span>
           </Tooltip>
         }
@@ -20,4 +20,4 @@ function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltip
       </OverlayTrigger>
     </Fragment>
   )
-}
+}

libs/remix-ui/helper/src/types/customtooltip.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from "react"
-import { Placement } from "react-bootstrap/esm/Overlay"
+import { Placement } from 'react-bootstrap/esm/Overlay'
+import { OverlayTriggerRenderProps } from 'react-bootstrap/esm/OverlayTrigger'
 
 export type CustomTooltipType = {
-  children: ReactNode,
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((props: OverlayTriggerRenderProps) => React.ReactNode),
   placement?: Placement,
   tooltipId?: string,
   tooltipClasses?:string,

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

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react' // eslint-disable-lin
 import { PluginRecord } from '../types'
 import './panel.css'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export interface RemixPanelProps {
   plugins: Record<string, PluginRecord>;
@@ -25,6 +26,12 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
     setToggleExpander(!toggleExpander)
   }
 
+  const tooltipChild = (
+    <div className="swapitHeaderInfoSection d-flex justify-content-between" data-id='swapitHeaderInfoSectionId' onClick={toggleClass}>
+              <i className={`px-2 ml-2 pt-1 pb-4 ${!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down bg-light'}`} aria-hidden="true"></i>
+            </div>
+  )
+
   return (
     <header className='d-flex flex-column'>
       <div className="swapitHeader px-3 pt-2 pb-0 d-flex flex-row">
@@ -44,15 +51,14 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
               </OverlayTrigger>
             )}
           </div>
-          <OverlayTrigger overlay={
-            <Tooltip className="text-nowrap" id="pluginInfoTooltip">
-              <span>Plugin info</span>
-            </Tooltip>
-          } placement={'right-end'}>
-            <div className="swapitHeaderInfoSection d-flex justify-content-between" data-id='swapitHeaderInfoSectionId' onClick={toggleClass}>
-              <i className={`px-2 ml-2 pt-1 pb-4 ${!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down bg-light'}`} aria-hidden="true"></i>
-            </div>
-          </OverlayTrigger>
+          <CustomTooltip
+            placement="right-end"
+            tooltipText="Plugin info"
+            tooltipId="pluginInfoTooltip"
+            tooltipClasses="text-nowrap"
+          >
+            {tooltipChild}
+          </CustomTooltip>
         </div>
       </div>
       <div className={`bg-light mx-3 mb-2 p-3 pt-1 border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>