use label with inbuilt tooltip for each radiobutton

Signed-off-by: Veena S <[email protected]>
veenas1 · Apr 19, 2024 · 8ec9715 · 8ec9715
1 parent 7cf79c6
commit 8ec9715
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.jsx
@@ -199,19 +199,22 @@ class RadiosetControl extends React.Component {
 				name: this.props.propertyId.name,
 				row: i
 			};
+			const labelWithInfo = (<div className="label-tooltip-container">
+				{valueSet.valueLabels[i]}
+				{tooltipIcon}
+			</div>);
 			buttons.push(
 				<div key={i} className="properties-radioset-panel">
 					<div className="properties-radioset-tooltip">
 						<RadioButton
 							key={i}
 							id={ControlUtils.getControlId(id, this.uuid)}
 							disabled={disabled || itemDisabled}
-							labelText={valueSet.valueLabels[i]}
+							labelText={labelWithInfo}
 							value={val}
 							onChange={this.handleChange}
 							checked={checked}
 						/>
-						{tooltipIcon}
 					</div>
 					{optionalPanel}
 				</div>

diff --git a/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.scss b/canvas_modules/common-canvas/src/common-properties/controls/radioset/radioset.scss
@@ -40,8 +40,9 @@
 			align-items: center;
 			margin: 2.5px 0 1.5px 0;
 		}
-		.tooltip-container {
-			margin-bottom: 3px; // align tooltip icon with the radio button
+		.label-tooltip-container {
+			 display: flex;
+			 align-items: center;
 		}
 		.properties-control-nested-panel{
 			flex-basis: 100%;