Merge pull request #202 from GinaIsaia/tooltip_updates

Tooltip updates
odpi · Jun 20, 2023 · a29adb8 · a29adb8
2 parents d027708 + a1ef6e4
commit a29adb8
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lfai/happi-graph",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Generic graph rendering solution.",
   "license": "Apache-2.0",
   "repository": {

diff --git a/src/components/HappiGraph/happi-graph-list-of-relationships.component.tsx b/src/components/HappiGraph/happi-graph-list-of-relationships.component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Table, ActionIcon } from '@mantine/core';
+import { Modal, Table, ActionIcon, Tooltip } from '@mantine/core';
 import {
   BsCardChecklist
 } from 'react-icons/bs';
@@ -68,9 +68,11 @@ class HappiGraphListOfRelationships extends React.Component<Props, State> {
     const { data, opened } = this.state;
 
     return (<>
-      <ActionIcon title="List of Relationships" variant="subtle" size={35}>
+    <Tooltip label="List of Relationships" position="right">
+      <ActionIcon variant="subtle" size={35}>
         <BsCardChecklist size={25} onClick={() => this.setOpened(true)} />
       </ActionIcon>
+    </Tooltip>
 
 
       <Modal

diff --git a/src/components/HappiGraph/happi-graph-statistics.component.tsx b/src/components/HappiGraph/happi-graph-statistics.component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Table, ActionIcon } from '@mantine/core';
+import { Modal, Table, ActionIcon, Tooltip } from '@mantine/core';
 import {
   IoMdStats
 } from 'react-icons/io';
@@ -72,9 +72,11 @@ class HappiGraphStatistics extends React.Component<Props, State> {
     const { data, opened } = this.state;
 
     return (<>
-      <ActionIcon title="Statistics" variant="subtle" size={35}>
+    <Tooltip label="Statistics" position="right">
+      <ActionIcon variant="subtle" size={35}>
         <IoMdStats size={25} onClick={() => this.setOpened(true)} />
       </ActionIcon>
+    </Tooltip>
 
       <Modal
         opened={opened}

diff --git a/src/components/HappiGraph/happi-graph.component.tsx b/src/components/HappiGraph/happi-graph.component.tsx
@@ -6,7 +6,7 @@ import { elkApproach, visApproach } from "./happi-graph.algorithms";
 import { addLinks, addNodes, centerGraph, customZoomIn, customZoomOut, initCenterGraph } from "./happi-graph.render";
 import HappiGraphLegend from "./happi-graph-legend.component";
 
-import { ActionIcon } from '@mantine/core';
+import { ActionIcon, Tooltip } from '@mantine/core';
 
 import {
   MdZoomIn,
@@ -291,22 +291,30 @@ class HappiGraph extends React.Component<Props, State> {
 
         { !printMode && <>
           <div className="happi-graph-actions">
-            <ActionIcon title="Zoom In" variant="subtle" size={35}>
+          <Tooltip label="Zoom in" position="right">
+            <ActionIcon variant="subtle" size={35}>
               <MdZoomIn size={25} onClick={() => customZoomIn(zoom, svg) } />
             </ActionIcon>
+          </Tooltip>
 
-            <ActionIcon title="Zoom Out" variant="subtle" size={35}>
+          <Tooltip label="Zoom out" position="right">
+            <ActionIcon variant="subtle" size={35}>
               <MdZoomOut size={25} onClick={() => customZoomOut(zoom, svg) } />
             </ActionIcon>
+          </Tooltip>
 
-            <ActionIcon title="Fit to screen" variant="subtle" size={35}>
+          <Tooltip label="Fit to screen" position="right">
+            <ActionIcon variant="subtle" size={35}>
               <MdOutlineCenterFocusWeak size={25} onClick={() => centerGraph(allGroup, svg, zoom) } />
             </ActionIcon>
+          </Tooltip>
 
-            <ActionIcon title="Fullscreen" variant="subtle" size={35}>
+          <Tooltip label="Fullscreen" position="right">
+            <ActionIcon variant="subtle" size={35}>
               { !isFullscreen && <AiOutlineFullscreen size={25} onClick={() => this.setFullscreen() } /> }
               { isFullscreen && <AiOutlineFullscreenExit size={25} onClick={() => this.setFullscreen() } /> }
             </ActionIcon>
+          </Tooltip>
 
             { actions }
           </div>