Fix bugs in tooltip icon

src/index.css

@@ -78,13 +78,6 @@ a.hashLink { font-size: 1.1em;}
 .indicator { padding: 0px 5px; background: transparent; border: none; cursor: pointer; vertical-align: middle; color:rgba(0, 0, 0, 0.25) }
 
 
-.tooltip-holder { position: relative; display: inline}
-.tooltip-holder .tooltip {display: none; font-size: 0.9em; position: absolute; margin-left: 10px; width: 300px; padding: 10px; border-radius: 5px;}
-.tooltip-holder .tooltip p { margin-bottom: 0;}
-.tooltip-holder .tooltip .tooltip-header { font-weight: bold; margin-bottom: 5px;}
-.tooltip:hover { display: inline;}
-.tooltip-holder:hover .tooltip { display: inline; }
-
 .error { color: maroon; }
 
 .soft { opacity: 0.7 }

src/networking/components/VpcView.css

@@ -12,7 +12,7 @@
 }
 
 .vpc-view .host-part {
-    color: darkcyan;
+    color: coral;
 }
 
 .vpc-view .subnet-part {
@@ -47,4 +47,8 @@
 
 .vpc-view .address-container {
     margin: 20px 0;
+}
+
+.vpc-view .tooltip-icon {
+    margin-left: 5px;
 }

src/shell/components/IconWithTooltip.css

@@ -0,0 +1,37 @@
+.tooltip-holder {
+    position: relative;
+    display: inline
+}
+
+.tooltip-holder .tooltip-icon {
+    opacity: 0.5;
+    z-index: 0;
+}
+
+.tooltip-holder .tooltip {
+    display: none;
+    font-size: 0.9em;
+    position: absolute;
+    margin-left: 5px;
+    width: 300px;
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 10;
+}
+
+.tooltip-holder .tooltip p {
+    margin-bottom: 0;
+}
+
+.tooltip-holder .tooltip .tooltip-header {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.tooltip:hover {
+    display: inline;
+}
+
+.tooltip-holder:hover .tooltip {
+    display: inline;
+}

src/shell/components/IconWithTooltip.tsx

@@ -1,5 +1,6 @@
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./IconWithTooltip.css";
 
 export type IconWithToolTipProps = {
     icon: IconProp
@@ -7,7 +8,7 @@ export type IconWithToolTipProps = {
 
 function IconWithToolTip (props: React.PropsWithChildren<IconWithToolTipProps>)  {
     return <div className='tooltip-holder'>
-        <button><FontAwesomeIcon icon={props.icon} /></button>
+        <span className="tooltip-icon"><FontAwesomeIcon icon={props.icon} /></span>
 
         <div className='tooltip solid-border solid-background'>
             {props.children}