diff --git a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx b/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx index 8b2a658de4..b105a4c2f8 100644 --- a/canvas_modules/common-canvas/src/toolbar/toolbar-button-item.jsx +++ b/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 ( - + {content} ); diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx b/canvas_modules/common-canvas/src/tooltip/tooltip.jsx index 37760f7aa4..911ea511b4 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.jsx +++ b/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); + }} > @@ -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; diff --git a/canvas_modules/common-canvas/src/tooltip/tooltip.scss b/canvas_modules/common-canvas/src/tooltip/tooltip.scss index 81940635dc..77c7600196 100644 --- a/canvas_modules/common-canvas/src/tooltip/tooltip.scss +++ b/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; diff --git a/canvas_modules/harness/src/client/App.js b/canvas_modules/harness/src/client/App.js index c004e50911..578ec66595 100644 --- a/canvas_modules/harness/src/client/App.js +++ b/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: () } ]; + const saveReloadTooltip = + (
+
+

jjennings saved the flow at 8:18AM.

+
+ +
+
+ + +
+
); + toolbarConfig = { leftBar: [ { action: "palette", label: "Palette", enable: true }, @@ -2192,7 +2208,8 @@ class App extends React.Component { { divider: true }, { action: "color-subpanel", iconEnabled: (), label: "Color picker", enable: true, subPanel: ColorPicker, subPanelData: { clickActionHandler: (color) => window.alert("Color selected = " + color) } }, - { divider: true } + { divider: true }, + { action: "save", iconEnabled: (), enable: true, tooltip: saveReloadTooltip } ], rightBar: [ { divider: true },