From b4ce4b44e86c77a6425fdb4109e2e8e224d82d6c Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 22 Sep 2022 11:03:09 +0100
Subject: [PATCH] custom tooltip for plugin info

---
 .../panel/src/lib/plugins/panel-header.tsx        | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
index b6e8c9948a..ba729b5c0a 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
@@ -2,6 +2,7 @@
 import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
 import { PluginRecord } from '../types'
 import './panel.css'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 export interface RemixPanelProps {
   plugins: Record<string, PluginRecord>;
@@ -32,9 +33,15 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
           <div className="d-flex flex-row">
             {plugin?.profile?.maintainedBy?.toLowerCase() === "remix" && (<i aria-hidden="true" className="text-success mt-1 px-1 fas fa-check" title="Maintained by Remix"></i>)}
           </div>
-          <div className="swapitHeaderInfoSection d-flex justify-content-between" data-id='swapitHeaderInfoSectionId' onClick={toggleClass} title="Plugin info">
-            <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 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>
         </div>
       </div>
       <div className={`bg-light mx-3 mb-2 p-3 pt-1 border-bottom flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
@@ -57,7 +64,7 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
           <span> { plugin?.profile.description } </span>
         </span>}
         {plugin?.profile?.repo && <span className="d-flex flex-row align-items-center">
-          <a href={plugin?.profile?.repo} target="_blank" rel="noreferrer">          
+          <a href={plugin?.profile?.repo} target="_blank" rel="noreferrer">
           Make an issue</a>
         </span>}
       </div>