Use tooltip for hover in delete-cluster-confirmation dialog

Signed-off-by: Alex Culliere <alozhkin@mirantis.com>

src/renderer/components/cluster-manager/cluster-actions.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import uniqueId from "lodash/uniqueId";
 import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
 
@@ -7,6 +8,7 @@ import { broadcastMessage, requestMain } from "../../../common/ipc";
 import { clusterDisconnectHandler } from "../../../common/cluster-ipc";
 import { ConfirmDialog } from "../confirm-dialog";
 import { Cluster } from "../../../main/cluster";
+import { Tooltip } from "../../components//tooltip";
 
 const navigate = (route: string) =>
   broadcastMessage("renderer:navigate", route);
@@ -25,17 +27,24 @@ export const ClusterActions = (cluster: Cluster) => ({
     navigate(landingURL());
     await requestMain(clusterDisconnectHandler, cluster.id);
   },
-  remove: () => ConfirmDialog.open({
-    okButtonProps: {
-      primary: false,
-      accent: true,
-      label: "Remove"
-    },
-    ok: () => {
-      clusterStore.deactivate(cluster.id);
-      clusterStore.removeById(cluster.id);
-      navigate(landingURL());
-    },
-    message: <p>Are you sure want to remove cluster <b title={cluster.id}>{cluster.contextName}</b>?</p>,
-  })
+  remove: () => {
+    const tooltipId = uniqueId("tooltip_target_");
+
+    return ConfirmDialog.open({
+      okButtonProps: {
+        primary: false,
+        accent: true,
+        label: "Remove"
+      },
+      ok: () => {
+        clusterStore.deactivate(cluster.id);
+        clusterStore.removeById(cluster.id);
+        navigate(landingURL());
+      },
+      message: <p>
+        Are you sure want to remove cluster <b id={tooltipId}>{cluster.name}</b>?
+        <Tooltip  targetId={tooltipId}>{cluster.id}</Tooltip>
+      </p>
+    });
+  }
 });