show ip of onion path on hover of country name

stylesheets/_session.scss

@@ -1095,6 +1095,7 @@ input {
   flex-direction: column;
   margin: $session-margin-sm;
   align-items: flex-start;
+  min-width: 10vw;
   position: relative;
 
   .onion__node {

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -19,6 +19,8 @@ import { Flex } from '../basic/Flex';
 import { SessionIcon, SessionIconButton } from '../session/icon';
 import { SessionSpinner } from '../session/SessionSpinner';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
+// tslint:disable-next-line: no-submodule-imports
+import useHover from 'react-use/lib/useHover';
 
 export type StatusLightType = {
   glowStartDelay: number;
@@ -26,6 +28,25 @@ export type StatusLightType = {
   color?: string;
 };
 
+const OnionCountryDisplay = ({
+  index,
+  labelText,
+  snodeIp,
+}: {
+  snodeIp?: string;
+  labelText: string;
+  index: number;
+}) => {
+  const element = (hovered: boolean) => (
+    <div className="onion__node__country" key={`country-${index}`}>
+      {hovered && snodeIp ? snodeIp : labelText}
+    </div>
+  );
+  const [hoverable] = useHover(element);
+
+  return hoverable;
+};
+
 const OnionPathModalInner = () => {
   const onionPath = useSelector(getFirstOnionPath);
   const isOnline = useSelector(getIsOnline);
@@ -69,14 +90,12 @@ const OnionPathModalInner = () => {
             {nodes.map((snode: Snode | any, index: number) => {
               let labelText = snode.label
                 ? snode.label
-                : `${countryLookup.byIso(ip2country(snode.ip))?.country} [${snode.ip}]`;
+                : `${countryLookup.byIso(ip2country(snode.ip))?.country}`;
               if (!labelText) {
                 labelText = window.i18n('unknownCountry');
               }
               return labelText ? (
-                <div className="onion__node__country" key={`country-${index}`}>
+                <OnionCountryDisplay index={index} labelText={labelText} snodeIp={snode.ip} />
-                  {labelText}
-                </div>
               ) : null;
             })}
           </Flex>