diff --git a/src/index.css b/src/index.css index 21515d2..30e855e 100644 --- a/src/index.css +++ b/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 } diff --git a/src/networking/components/VpcView.css b/src/networking/components/VpcView.css index 1d878c2..be50781 100644 --- a/src/networking/components/VpcView.css +++ b/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; } \ No newline at end of file diff --git a/src/shell/components/IconWithTooltip.css b/src/shell/components/IconWithTooltip.css new file mode 100644 index 0000000..ff28c73 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/shell/components/IconWithTooltip.tsx b/src/shell/components/IconWithTooltip.tsx index dcbcca3..ca39ceb 100644 --- a/src/shell/components/IconWithTooltip.tsx +++ b/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) { return
- +
{props.children}