diff --git a/webview/src/plots/components/App.test.tsx b/webview/src/plots/components/App.test.tsx
index f9a7358b33..c763065f48 100644
--- a/webview/src/plots/components/App.test.tsx
+++ b/webview/src/plots/components/App.test.tsx
@@ -3,7 +3,7 @@
  */
 import { join } from 'dvc/src/test/util/path'
 import { configureStore } from '@reduxjs/toolkit'
-import React from 'react'
+import React, { ReactElement } from 'react'
 import { Provider } from 'react-redux'
 import {
   cleanup,
@@ -953,19 +953,29 @@ describe('App', () => {
     const [templateInfo, comparisonInfo, checkpointInfo] =
       screen.getAllByTestId('info-tooltip-toggle')
 
+    const getSectionText = (sectionNode: ReactElement) =>
+      // eslint-disable-next-line testing-library/no-node-access
+      sectionNode.props.children || ''
+
     fireEvent.mouseEnter(templateInfo, { bubbles: true })
     expect(
-      screen.getByText(SectionDescription[Section.TEMPLATE_PLOTS])
+      screen.getByText(
+        getSectionText(SectionDescription[Section.TEMPLATE_PLOTS])
+      )
     ).toBeInTheDocument()
 
     fireEvent.mouseEnter(comparisonInfo, { bubbles: true })
     expect(
-      screen.getByText(SectionDescription[Section.COMPARISON_TABLE])
+      screen.getByText(
+        getSectionText(SectionDescription[Section.COMPARISON_TABLE])
+      )
     ).toBeInTheDocument()
 
     fireEvent.mouseEnter(checkpointInfo, { bubbles: true })
     expect(
-      screen.getByText(SectionDescription[Section.CHECKPOINT_PLOTS])
+      screen.getByText(
+        getSectionText(SectionDescription[Section.CHECKPOINT_PLOTS])
+      )
     ).toBeInTheDocument()
   })
 
diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx
index e211ff9d49..57f1350882 100644
--- a/webview/src/plots/components/PlotsContainer.tsx
+++ b/webview/src/plots/components/PlotsContainer.tsx
@@ -33,14 +33,20 @@ export interface PlotsContainerProps extends CommonPlotsContainerProps {
 
 export const SectionDescription = {
   // "Trends"
-  [Section.CHECKPOINT_PLOTS]:
-    'Real-time plots based on metrics from the Experiments Table',
+  [Section.CHECKPOINT_PLOTS]: (
+    <span>Real-time plots based on metrics from the Experiments Table</span>
+  ),
   // "Images"
-  [Section.COMPARISON_TABLE]:
-    'Displays image plots side by side across experiments.',
+  [Section.COMPARISON_TABLE]: (
+    <span>Displays image plots side by side across experiments.</span>
+  ),
   // "Data Series"
-  [Section.TEMPLATE_PLOTS]:
-    'Plots of JSON, YAML, CSV, or TSV files, visualized using `dvc plots` templates'
+  [Section.TEMPLATE_PLOTS]: (
+    <span>
+      Plots of JSON, YAML, CSV, or TSV files, visualized using `dvc plots`
+      templates
+    </span>
+  )
 }
 
 const InfoIcon = () => (
@@ -130,7 +136,7 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
           />
 
           {title}
-          <Tooltip content={tooltipContent} placement="bottom-end">
+          <Tooltip content={tooltipContent} placement="bottom-end" interactive>
             <div
               className={styles.infoTooltipToggle}
               data-testid="info-tooltip-toggle"