Use react bootstrap tooltips to prevent multiple popups

frontend/src/Editor/Editor.jsx

@@ -545,7 +545,7 @@ class Editor extends React.Component {
                     </div>
                     <div className="col-md-3">
                       <span
-                        className="btn btn-light btn-sm"
+                        className="btn btn-light btn-sm text-muted"
                         data-tip="Add new datasource"
                         onClick={() => this.setState({ showDataSourceManagerModal: true, selectedDataSource: null })}
                       >
@@ -641,7 +641,7 @@ class Editor extends React.Component {
 
                           <span
                             data-tip="Add new query"
-                            className="btn btn-sm btn-light"
+                            className="btn btn-sm btn-light  text-muted"
                             onClick={() => this.setState({ selectedQuery: {}, editingQuery: false, addingQuery: true })}
                           >
                             +

frontend/src/Editor/Inspector/Elements/Code.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CodeHinter } from '../../CodeBuilder/CodeHinter';
-import { getToolTipProps } from './utils';
+import { ToolTip } from './Components/ToolTip';
 
 export const Code = ({
   param, definition, onChange, paramType, dataQueries, components, componentMeta, currentState
@@ -17,7 +17,7 @@ export const Code = ({
 
   return (
     <div className={`mb-2 field ${options.className}`}>
-      <label {...getToolTipProps(paramMeta)}  className="form-label">{displayName}</label>
+      <ToolTip label={displayName} meta={paramMeta}/>
       <CodeHinter
           currentState={currentState}
           initialValue={initialValue}

frontend/src/Editor/Inspector/Elements/Color.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { SketchPicker } from 'react-color';
-import { getToolTipProps } from './utils';
+import { ToolTip } from './Components/ToolTip';
 
 export const Color = ({
   param, definition, onChange, paramType, componentMeta
@@ -20,7 +20,7 @@ export const Color = ({
 
   return (
     <div className="field mb-2">
-      <label {...getToolTipProps(paramMeta)} className="form-label">{displayName}</label>
+      <ToolTip label={displayName} meta={paramMeta}/>
 
       {showPicker && (
         <div>

frontend/src/Editor/Inspector/Elements/Components/ToolTip.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+
+const tooltipStyle = {
+  textDecorationLine: 'underline',
+  textDecorationStyle: 'dashed'
+}
+
+export const ToolTip = ({
+  label, meta, labelClass
+}) => {
+
+  function renderTooltip(props) {
+    return <Tooltip id="button-tooltip" {...props}>
+      {meta.tip}
+    </Tooltip>
+  };
+
+  if (meta.tip) {
+    return (<OverlayTrigger
+      placement="left"
+      delay={{ show: 250, hide: 400 }}
+      overlay={renderTooltip}
+    >
+      <label 
+        style={tooltipStyle} 
+        className={labelClass || 'form-label'}
+      >
+          {label}
+      </label>
+    </OverlayTrigger>
+    );
+  } else {
+    return (<label className={labelClass || 'form-label'}>{label}</label>);
+  }
+}

frontend/src/Editor/Inspector/Elements/Json.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import 'codemirror/theme/duotone-light.css';
-import { getToolTipProps } from './utils';
+import { ToolTip } from './Components/ToolTip';
 
 export const Json = ({
   param, definition, onChange, paramType, componentMeta
@@ -19,7 +19,7 @@ export const Json = ({
 
   return (
     <div className="field mb-2">
-      <label {...getToolTipProps(paramMeta)} className="form-label">{displayName}</label>
+      <ToolTip label={displayName} meta={paramMeta}/>
       <CodeMirror
         height="300px"
         fontSize="2"

frontend/src/Editor/Inspector/Elements/Select.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getToolTipProps } from './utils';
+import { ToolTip } from './Components/ToolTip';
 import SelectSearch, { fuzzySearch } from 'react-select-search';
 
 export const Select = ({
@@ -13,7 +13,7 @@ export const Select = ({
 
   return (
     <div className="field mb-3">
-      <label {...getToolTipProps(paramMeta)} className="form-label">{displayName}</label>
+      <ToolTip label={displayName} meta={paramMeta}/>
       <SelectSearch
         options={options}
         value={value}

frontend/src/Editor/Inspector/Elements/Text.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getToolTipProps } from './utils';
+import { ToolTip } from './Components/ToolTip';
 
 export const Text = ({
   param, definition, onChange, paramType, componentMeta
@@ -10,7 +10,7 @@ export const Text = ({
   
   return (
     <div className="field mb-3">
-      <label {...getToolTipProps(paramMeta)} className="form-label">{displayName}</label>
+      <ToolTip label={displayName} meta={paramMeta}/>
       <input
         type="text"
         onChange={(e) => onChange(param, 'value', e.target.value, paramType)}

frontend/src/Editor/Inspector/Elements/Toggle.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getToolTipProps } from './utils';
+import { ToolTip } from './Components/ToolTip';
 
 export const Toggle = ({
   param, definition, onChange, paramType, componentMeta
@@ -17,9 +17,7 @@ export const Toggle = ({
               onClick={() => onChange(param, 'value', !value, paramType)}
               checked={value}
             />
-            <span {...getToolTipProps(paramMeta)} className="form-check-label">
-                {displayName}
-            </span>
+            <ToolTip label={displayName} meta={paramMeta} labelClass="form-check-label"/>
         </label>
     </div>
   );

frontend/src/Editor/Inspector/Elements/utils.js

@@ -1,14 +0,0 @@
-
-export function getToolTipProps(paramMeta) {
-    if(paramMeta.tip) {
-        return {
-            style: {
-                textDecorationLine: 'underline',
-                textDecorationStyle: 'dashed'
-            },
-            ['data-tip']: paramMeta.tip
-        }
-    } else {
-        return {}
-    }
-}

frontend/src/Editor/Inspector/Inspector.jsx

@@ -89,7 +89,6 @@ export const Inspector = ({
 
   return (
     <div className="inspector">
-    <ReactTooltip type="dark" effect="solid" place="left" eventOff="click" />
       <div className="header p-2 row">
         <div className="col-auto">
             <div className="input-icon">
@@ -164,10 +163,10 @@ export const Inspector = ({
       {!['Table', 'Chart'].includes(componentMeta.component)   && 
         <div className="properties-container p-2">
           {Object.keys(componentMeta.properties).map((property) => renderElement(component, componentMeta, paramUpdated, dataQueries, property, 'properties', currentState, components))}
-          <div class="hr-text">Events</div>
-          {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName], currentState, components))}
           <div class="hr-text">Style</div>
           {Object.keys(componentMeta.styles).map((style) => renderElement(component, componentMeta, paramUpdated, dataQueries, style, 'styles', currentState, components))}
+          <div class="hr-text">Events</div>
+          {Object.keys(componentMeta.events).map((eventName) => renderEvent(component, eventUpdated, dataQueries, eventOptionUpdated, eventName, componentMeta.events[eventName], currentState, components))}
         </div>
       }
     </div>