@elyra/canvas 12.11.2 → 12.12.2

package/src/tooltip/tooltip.jsx

@@ -20,6 +20,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Portal } from "react-portal";
+import { Link } from "carbon-components-react";
 
 class ToolTip extends React.Component {
 	constructor(props) {
@@ -325,6 +326,10 @@ class ToolTip extends React.Component {
 		}
 	}
 
+	tooltipLinkOnClick(url) {
+		window.open(url, "_blank", "noopener");
+	}
+
 	render() {
 		let tooltipContent = null;
 		let triggerContent = null;
@@ -336,7 +341,13 @@ class ToolTip extends React.Component {
 			// `focus` event occurs before `click`. Adding timeout in onFocus function to ensure click is executed first.
 			// Ref - https://stackoverflow.com/a/49512400
 			const onFocus = () => this.showTooltipWithDelay();
-			const onBlur = () => this.setTooltipVisible(false);
+			const onBlur = (evt) => {
+				// Keep tooltip visible when clicked on a link.
+				// Since link is an anchor tag without "href" attribute, it has relatedTarget=null
+				if (evt.relatedTarget !== null) {
+					this.setTooltipVisible(false);
+				}
+			};
 			const click = (evt) => this.toggleTooltipOnClick(evt);
 
 			triggerContent = (<div
@@ -374,6 +385,21 @@ class ToolTip extends React.Component {
 			tipClass += " " + this.props.className;
 		}
 
+		let link = null;
+		if (this.state.isTooltipVisible && this.props.tooltipLinkHandler && this.props.link) {
+			const linkInformation = this.props.tooltipLinkHandler(this.props.link);
+			// Verify tooltipLinkHandler returns object in correct format
+			if (typeof linkInformation === "object" && linkInformation.label && linkInformation.url) {
+				link = (<Link
+					className="tooltip-link"
+					id={this.props.link.id}
+					onClick={this.tooltipLinkOnClick.bind(this, linkInformation.url)}
+				>
+					{linkInformation.label}
+				</Link>);
+			}
+		}
+
 		return (
 			<div className="tooltip-container">
 				{triggerContent}
@@ -384,6 +410,7 @@ class ToolTip extends React.Component {
 							<polygon points="8.1,16.1 0,8.1 8.1,0 8.1,1.4 1.4,8.1 8.1,14.7" />
 						</svg>
 						{tooltipContent}
+						{link}
 					</div>
 				</Portal>
 			</div>
@@ -393,6 +420,8 @@ class ToolTip extends React.Component {
 
 ToolTip.propTypes = {
 	tip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	link: PropTypes.object,
+	tooltipLinkHandler: PropTypes.func,
 	direction: PropTypes.oneOf(["left", "right", "top", "bottom"]),
 	children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 	targetObj: PropTypes.object,

package/src/tooltip/tooltip.scss

@@ -34,6 +34,17 @@
 	word-wrap: break-word;
 	max-width: 228px;
 	border-radius: 2px;
+	.bx--link {
+		display: block;
+		color: $inverse-link;
+		margin-top: $spacing-05;
+		pointer-events: auto; // To make link clickable inside tooltip
+		cursor: pointer;
+		&:hover {
+			color: $inverse-link;
+			text-decoration: underline;
+		}
+	}
 }
 
 .common-canvas-tooltip[direction="right"] {