#2170 Toolbar (toolbarConfig) to support Toggletip, and it should pop…

…up like tooltip (shows up when mouse hover on it) (#2171)

Signed-off-by: Michael Pavlik <[email protected]>

canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx

@@ -316,7 +316,7 @@ class ToolbarButtonItem extends React.Component {
 			const direction = this.props.tooltipDirection ? this.props.tooltipDirection : "bottom";
 
 			return (
-				<Tooltip id={tooltipId} tip={tip} disable={!enableTooltip} className="icon-tooltip" direction={direction}>
+				<Tooltip id={tooltipId} tip={tip} disable={!enableTooltip} className="icon-tooltip" direction={direction} hoverable>
 					{content}
 				</Tooltip>
 			);

canvas_modules/common-canvas/src/tooltip/tooltip.jsx

@@ -35,6 +35,7 @@ class ToolTip extends React.Component {
 		this.tabKeyPressed = false;
 		// Tooltip should not close if link inside tooltip is clicked.
 		this.linkClicked = false;
+		this.inTooltip = false; // A boolean variable that determines if the cursor is over the tooltip
 	}
 
 	componentDidMount() {
@@ -356,7 +357,18 @@ class ToolTip extends React.Component {
 		if (this.props.children) {
 			// when children are passed in, tooltip will handle show/hide, otherwise consumer has to hide show/hide tooltip
 			const mouseover = () => this.setTooltipVisible(true);
-			const mouseleave = () => this.setTooltipVisible(false);
+			let mouseleave;
+			if (this.props.hoverable) {
+				mouseleave = () => {
+					setTimeout(() => {
+						if (!this.inTooltip) {
+							this.setTooltipVisible(false);
+						}
+					}, 100);
+				};
+			} else {
+				mouseleave = () => this.setTooltipVisible(false);
+			}
 			const mousedown = () => this.setTooltipVisible(false);
 			// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.
 			// Ref - https://stackoverflow.com/a/49512400
@@ -487,6 +499,13 @@ class ToolTip extends React.Component {
 						aria-hidden={!this.state.isTooltipVisible}
 						direction={this.props.direction}
 						ref={(ref) => (this.targetRef = ref)}
+						onMouseEnter={() => {
+							this.inTooltip = true;
+						}}
+						onMouseLeave={() => {
+							this.inTooltip = false;
+							this.setTooltipVisible(false);
+						}}
 					>
 						<svg className="tipArrow" x="0px" y="0px" viewBox="0 0 9.1 16.1">
 							<polyline points="9.1,15.7 1.4,8.1 9.1,0.5" />
@@ -522,14 +541,16 @@ ToolTip.propTypes = {
 	showToolTipIfTruncated: PropTypes.bool, // Set to true to only display tooltip if full text does not fit in displayable width
 	truncatedRef: PropTypes.object,
 	delay: PropTypes.number,
-	showToolTipOnClick: PropTypes.bool
+	showToolTipOnClick: PropTypes.bool,
+	hoverable: PropTypes.bool, // If true, mouse cursor can be hovered over to the tooltip, instead of immediately disappearing.
 };
 
 ToolTip.defaultProps = {
 	delay: 200,
 	direction: "bottom",
 	showToolTipIfTruncated: false, // False will always show Tooltip even when whole word can be displayed
-	showToolTipOnClick: false
+	showToolTipOnClick: false,
+	hoverable: false
 };
 
 export default ToolTip;

canvas_modules/common-canvas/src/tooltip/tooltip.scss

@@ -30,7 +30,6 @@
 	line-height: 1.2;
 	text-align: left;
 	z-index: 10000; // Modal layout has z-index 9000. Show tooltip on top of modal.
-	pointer-events: none;
 	word-wrap: break-word;
 	max-width: 228px;
 	border-radius: 2px;

canvas_modules/harness/src/client/App.js

@@ -89,7 +89,7 @@ import AppSettingsPanel from "./app-x-settings-panel.jsx";
 
 import { Add, AddAlt, SubtractAlt, Api_1 as Api, Chat, ChatOff, ColorPalette, Download, Edit, FlowData, GuiManagement,
 	Help, OpenPanelFilledBottom, Play, Scale, Settings, SelectWindow,
-	StopFilledAlt, Subtract, TextScale, TouchInteraction, Notification } from "@carbon/react/icons";
+	StopFilledAlt, Subtract, TextScale, TouchInteraction, Notification, Save } from "@carbon/react/icons";
 
 import { InlineLoading, Checkbox, Button, OverflowMenu, OverflowMenuItem, Toggle } from "@carbon/react";
 
@@ -2167,6 +2167,22 @@ class App extends React.Component {
 				{ action: "decrease", label: "Decrease", enable: true, iconEnabled: (<Subtract size={32} />) }
 			];
 
+			const saveReloadTooltip =
+					(<div>
+						<br />
+						<p style={ { fontSize: "12px" } } ><strong>jjennings</strong> saved the flow at 8:18AM.</p>
+						<br />
+						<ul>
+							<li><p style={ { fontSize: "12px" } }><strong>Reload</strong> to view changes. Caution: you will lose your changes.</p></li>
+							<li><p style={ { fontSize: "12px" } } ><strong>Save as</strong> to save your changes as a new flow</p></li>
+						</ul>
+						<br />
+						<div style={ { display: "flex", justifyContent: "space-between" } }>
+							<Button kind="secondary" size="sm" style={ { width: "30px", height: "10px", color: "lightblue" } }>Save</Button>
+							<Button kind="danger" size="sm" style={ { width: "30px", height: "10px" } }>Reload</Button>
+						</div>
+					</div>);
+
 			toolbarConfig = {
 				leftBar: [
 					{ action: "palette", label: "Palette", enable: true },
@@ -2192,7 +2208,8 @@ class App extends React.Component {
 					{ divider: true },
 					{ action: "color-subpanel", iconEnabled: (<ColorPalette size={32} />), label: "Color picker", enable: true,
 						subPanel: ColorPicker, subPanelData: { clickActionHandler: (color) => window.alert("Color selected = " + color) } },
-					{ divider: true }
+					{ divider: true },
+					{ action: "save", iconEnabled: (<Save size={32} />), enable: true, tooltip: saveReloadTooltip }
 				],
 				rightBar: [
 					{ divider: true },