-
Notifications
You must be signed in to change notification settings - Fork 46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
#2170 Toolbar (toolbarConfig) to support Toggletip, and it should popup like tooltip (shows up when mouse hover on it) #2171
Changes from 7 commits
8f7a9c0
9d2e90b
447df33
cbf78af
f83332d
e43fe3a
747fc31
5943192
406e5c8
4bf7814
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 in 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, can hover over to the tooltip, instead of immediately disappearing. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sorry picky again. Please change to: "If true, mouse cursor can be hovered over to the tooltip." |
||
}; | ||
|
||
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; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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"; | ||
|
||
|
@@ -2192,7 +2192,24 @@ 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: | ||
<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> | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you pull out this JSX for the tooltip and assign it to a variable above (like the way subMenuTextSize and subMenuSize are created and then just include the variable here? |
||
], | ||
rightBar: [ | ||
{ divider: true }, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry to be picky -- this should say '... cursor is over the tooltip'