fix for tippy

Author: shivani170

src/components/app/details/metrics/DeploymentMetrics.tsx

@@ -720,9 +720,7 @@ export class FrequencyGraphLegend extends React.Component<FrequencyGraphLegendPr
                             arrow={false}
                             content="How often this app is deployed to production?"
                         >
-                            <div className="flex">
-                                <Help className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
-                            </div>
+                             <span> <Help className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" /></span>  
                         </Tippy>
                         <span className="cursor" onClick={this.props.setFrequencyMetric}>
                             {renderCategoryTag(this.props.frequencyBenchmark.name)}{' '}
@@ -753,9 +751,9 @@ export class FrequencyGraphLegend extends React.Component<FrequencyGraphLegendPr
                             <p className="graph-legend__primary-label">
                                 Change Failure Rate
                                 <Tippy className="default-tt" arrow={false} content="How often does the pipeline fail?">
-                                    <div className="flex">
+                                    <span>
                                         <Help className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
-                                    </div>
+                                    </span>
                                 </Tippy>
                                 <span className="cursor" onClick={this.props.setFailureMetric}>
                                     {renderCategoryTag(this.props.failureRateBenchmark?.name)}{' '}
@@ -800,9 +798,9 @@ export class RecoveryAndLeadTimeGraphLegend extends React.Component<RecoveryAndL
                     <p className="graph-legend__primary-label">
                         {this.props.label}
                         <Tippy className="default-tt" arrow={false} content={this.props.tooltipText}>
-                            <div className="flex">
+                            <span>
                                 <Help className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
-                            </div>
+                            </span>
                         </Tippy>
                     </p>
                     <p className="graph-legend__primary-value">
@@ -818,9 +816,9 @@ export class RecoveryAndLeadTimeGraphLegend extends React.Component<RecoveryAndL
                 <p className="graph-legend__primary-label">
                     {this.props.label}
                     <Tippy className="default-tt" arrow={false} content={this.props.tooltipText}>
-                        <div className="flex">
+                        <span>
                             <Help className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
-                        </div>
+                        </span>
                     </Tippy>
                     <span className="cursor" onClick={this.props.setMetric}>
                         {renderCategoryTag(this.props.benchmark?.name)}{' '}

src/components/app/details/metrics/deploymentMetrics.util.tsx

@@ -168,9 +168,9 @@ export const FailureLegendEmptyState = (props) => {
             <p className="graph-legend__primary-label">
                 Change Failure Rate
                 <Tippy className="default-tt" arrow={false} content="How often does the pipeline fail?">
-                    <div className="flex">
+                    <span>
                         <Help className="icon-dim-20 ml-8 dc__vertical-align-middle mr-5" />
-                    </div>
+                    </span>
                 </Tippy>
             </p>
             <div className="mt-16">