diff --git a/public/app/core/components/DocsLinkButton.tsx b/public/app/core/components/DocsLinkButton.tsx
new file mode 100644
index 00000000000..fb476deea10
--- /dev/null
+++ b/public/app/core/components/DocsLinkButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { LinkButton } from '@grafana/ui';
+
+type Props = {
+  hrefSuffix: string;
+};
+
+export function DocsLinkButton(props: Props) {
+  const { hrefSuffix } = props;
+  const tooltip = 'Learn more in the Grafana docs';
+
+  return (
+    <LinkButton
+      aria-label={tooltip}
+      icon="external-link-alt"
+      fill="text"
+      href={`https://grafana.com/docs/grafana/next/datasources/${hrefSuffix}`}
+      variant="secondary"
+      size="md"
+      target="_blank"
+      tooltip={tooltip}
+      tooltipPlacement="top"
+    />
+  );
+}
diff --git a/public/app/core/components/NodeGraphSettings.tsx b/public/app/core/components/NodeGraphSettings.tsx
index 1cf1dd9b7f3..459beda1aeb 100644
--- a/public/app/core/components/NodeGraphSettings.tsx
+++ b/public/app/core/components/NodeGraphSettings.tsx
@@ -4,9 +4,12 @@ import React from 'react';
 import {
   DataSourceJsonData,
   DataSourcePluginOptionsEditorProps,
+  GrafanaTheme2,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
+
+import { DocsLinkButton } from './DocsLinkButton';
 
 export interface NodeGraphOptions {
   enabled?: boolean;
@@ -19,9 +22,17 @@ export interface NodeGraphData extends DataSourceJsonData {
 interface Props extends DataSourcePluginOptionsEditorProps<NodeGraphData> {}
 
 export function NodeGraphSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles2(getStyles);
+
   return (
     <div className={styles.container}>
       <h3 className="page-heading">Node graph</h3>
+
+      <div className={styles.infoText}>
+        {`Show or hide the node graph visualization`}
+        <DocsLinkButton hrefSuffix={`${options.type}/#node-graph`} />
+      </div>
+
       <InlineFieldRow className={styles.row}>
         <InlineField
           tooltip="Displays the node graph above the trace view. Default: disabled"
@@ -44,7 +55,12 @@ export function NodeGraphSettings({ options, onOptionsChange }: Props) {
   );
 }
 
-const styles = {
+const getStyles = (theme: GrafanaTheme2) => ({
+  infoText: css`
+    label: infoText;
+    padding-bottom: ${theme.spacing(2)};
+    color: ${theme.colors.text.secondary};
+  `,
   container: css`
     label: container;
     width: 100%;
@@ -53,4 +69,4 @@ const styles = {
     label: row;
     align-items: baseline;
   `,
-};
+});
diff --git a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
index 669fc237033..d572983fdb9 100644
--- a/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
+++ b/public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx
@@ -10,6 +10,8 @@ import {
 import { DataSourcePicker } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, Input, useStyles2, InlineSwitch } from '@grafana/ui';
 
+import { DocsLinkButton } from '../DocsLinkButton';
+
 import { TagMappingInput } from './TagMappingInput';
 
 // @deprecated use getTraceToLogsOptions to get the v2 version of this config from jsonData
@@ -107,7 +109,10 @@ export function TraceToLogsSettings({ options, onOptionsChange }: Props) {
     <div className={css({ width: '100%' })}>
       <h3 className="page-heading">Trace to logs</h3>
 
-      <div className={styles.infoText}>Navigate from a trace span to the selected data source&apos;s logs.</div>
+      <div className={styles.infoText}>
+        Navigate from a trace span to the selected data source&apos;s logs
+        <DocsLinkButton hrefSuffix={`${options.type}/#trace-to-logs`} />
+      </div>
 
       <InlineFieldRow>
         <InlineField
diff --git a/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
index 0d70787550e..2e6a12662e1 100644
--- a/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
+++ b/public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx
@@ -10,6 +10,7 @@ import {
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, InlineField, InlineFieldRow, Input, useStyles2 } from '@grafana/ui';
 
+import { DocsLinkButton } from '../DocsLinkButton';
 import { TagMappingInput } from '../TraceToLogs/TagMappingInput';
 
 export interface TraceToMetricsOptions {
@@ -38,7 +39,10 @@ export function TraceToMetricsSettings({ options, onOptionsChange }: Props) {
     <div className={css({ width: '100%' })}>
       <h3 className="page-heading">Trace to metrics</h3>
 
-      <div className={styles.infoText}>Navigate from a trace span to the selected data source&apos;s metrics.</div>
+      <div className={styles.infoText}>
+        Navigate from a trace span to the selected data source&apos;s metrics
+        <DocsLinkButton hrefSuffix={`${options.type}/#trace-to-metrics`} />
+      </div>
 
       <InlineFieldRow className={styles.row}>
         <InlineField
diff --git a/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx b/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
index 5beba96c5b8..a59323f27ad 100644
--- a/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
+++ b/public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx
@@ -9,6 +9,7 @@ import {
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
 import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';
 
 export interface SpanBarOptions {
   type?: string;
@@ -34,7 +35,8 @@ export default function SpanBarSettings({ options, onOptionsChange }: Props) {
       <h3 className="page-heading">Span bar</h3>
 
       <div className={styles.infoText}>
-        Add additional info next to the service and operation on a span bar row in the trace view.
+        Add additional info next to the service and operation on a span bar row in the trace view
+        <DocsLinkButton hrefSuffix={`${options.type}/#span-bar`} />
       </div>
 
       <InlineFieldRow className={styles.row}>
@@ -88,7 +90,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding-bottom: ${theme.spacing(2)};
     color: ${theme.colors.text.secondary};
   `,
-
   row: css`
     label: row;
     align-items: baseline;
diff --git a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
index eb2cbb51e8a..e43ba60e472 100644
--- a/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/LokiSearchSettings.tsx
@@ -1,12 +1,14 @@
-import { css } from '@emotion/css';
 import React from 'react';
 
-import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';
 
 import { TempoJsonData } from '../types';
 
+import { getStyles } from './QuerySettings';
+
 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
 
 export function LokiSearchSettings({ options, onOptionsChange }: Props) {
@@ -23,11 +25,12 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) {
   }
 
   return (
-    <div className={css({ width: '100%' })}>
+    <div className={styles.container}>
       <h3 className="page-heading">Loki search</h3>
 
       <div className={styles.infoText}>
-        Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source.
+        Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source
+        <DocsLinkButton hrefSuffix="tempo/#loki-search" />
       </div>
 
       <InlineFieldRow className={styles.row}>
@@ -64,15 +67,3 @@ export function LokiSearchSettings({ options, onOptionsChange }: Props) {
     </div>
   );
 }
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  infoText: css`
-    label: infoText;
-    padding-bottom: ${theme.spacing(2)};
-    color: ${theme.colors.text.secondary};
-  `,
-  row: css`
-    label: row;
-    align-items: baseline;
-  `,
-});
diff --git a/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx b/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
index f8f0f154b8b..d901982dce9 100644
--- a/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { InlineField, InlineFieldRow, InlineSwitch, Input, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';
 
 import { TempoJsonData } from '../types';
 
@@ -16,7 +17,8 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
       <h3 className="page-heading">TraceID query</h3>
 
       <div className={styles.infoText}>
-        Modify how TraceID queries are run. These settings do not apply to TraceQL queries.
+        Modify how TraceID queries are run
+        <DocsLinkButton hrefSuffix="tempo/#traceid-query" />
       </div>
 
       <InlineField
@@ -83,18 +85,15 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
   );
 }
 
-const getStyles = (theme: GrafanaTheme2) => ({
+export const getStyles = (theme: GrafanaTheme2) => ({
   infoText: css`
-    label: infoText;
     padding-bottom: ${theme.spacing(2)};
     color: ${theme.colors.text.secondary};
   `,
   container: css`
-    label: container;
     width: 100%;
   `,
   row: css`
-    label: row;
     align-items: baseline;
   `,
 });
diff --git a/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx b/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
index 0e0ef4bd4f2..f674a718862 100644
--- a/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/SearchSettings.tsx
@@ -1,17 +1,27 @@
-import { css } from '@emotion/css';
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
-import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';
 
 import { TempoJsonData } from '../types';
 
+import { getStyles } from './QuerySettings';
+
 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
 
 export function SearchSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles2(getStyles);
+
   return (
     <div className={styles.container}>
       <h3 className="page-heading">Tempo search</h3>
+
+      <div className={styles.infoText}>
+        Modify how traces are searched
+        <DocsLinkButton hrefSuffix="tempo/#tempo-search" />
+      </div>
+
       <InlineFieldRow className={styles.row}>
         <InlineField tooltip="Removes the search tab from the query editor" label="Hide search" labelWidth={26}>
           <InlineSwitch
@@ -29,14 +39,3 @@ export function SearchSettings({ options, onOptionsChange }: Props) {
     </div>
   );
 }
-
-const styles = {
-  container: css`
-    label: container;
-    width: 100%;
-  `,
-  row: css`
-    label: row;
-    align-items: baseline;
-  `,
-};
diff --git a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
index 28dad5caaec..e947f0fd044 100644
--- a/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ServiceGraphSettings.tsx
@@ -1,22 +1,27 @@
-import { css } from '@emotion/css';
 import React from 'react';
 
-import { DataSourcePluginOptionsEditorProps, GrafanaTheme2, updateDatasourcePluginJsonDataOption } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
 import { Button, InlineField, InlineFieldRow, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';
 
 import { TempoJsonData } from '../types';
 
+import { getStyles } from './QuerySettings';
+
 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
 
 export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
   const styles = useStyles2(getStyles);
 
   return (
-    <div className={css({ width: '100%' })}>
+    <div className={styles.container}>
       <h3 className="page-heading">Service graph</h3>
 
-      <div className={styles.infoText}>Select a Prometheus data source that contains the service graph data.</div>
+      <div className={styles.infoText}>
+        Select a Prometheus data source that contains the service graph data
+        <DocsLinkButton hrefSuffix="tempo/#service-graph" />
+      </div>
 
       <InlineFieldRow className={styles.row}>
         <InlineField
@@ -56,15 +61,3 @@ export function ServiceGraphSettings({ options, onOptionsChange }: Props) {
     </div>
   );
 }
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  infoText: css`
-    label: infoText;
-    padding-bottom: ${theme.spacing(2)};
-    color: ${theme.colors.text.secondary};
-  `,
-  row: css`
-    label: row;
-    align-items: baseline;
-  `,
-});
diff --git a/public/app/plugins/datasource/tempo/configuration/TraceQLSearchSettings.tsx b/public/app/plugins/datasource/tempo/configuration/TraceQLSearchSettings.tsx
index 0a2ab3cea5f..e85311bd147 100644
--- a/public/app/plugins/datasource/tempo/configuration/TraceQLSearchSettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/TraceQLSearchSettings.tsx
@@ -1,19 +1,21 @@
-import { css } from '@emotion/css';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 
 import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
 import { getDataSourceSrv } from '@grafana/runtime';
-import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
+import { DocsLinkButton } from 'app/core/components/DocsLinkButton';
 
 import { TempoDatasource } from '../datasource';
 import { TempoJsonData } from '../types';
 
+import { getStyles } from './QuerySettings';
 import { TraceQLSearchTags } from './TraceQLSearchTags';
 
 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}
 
 export function TraceQLSearchSettings({ options, onOptionsChange }: Props) {
+  const styles = useStyles2(getStyles);
   const dataSourceSrv = getDataSourceSrv();
   const fetchDatasource = async () => {
     return (await dataSourceSrv.get({ type: options.type, uid: options.uid })) as TempoDatasource;
@@ -24,6 +26,12 @@ export function TraceQLSearchSettings({ options, onOptionsChange }: Props) {
   return (
     <div className={styles.container}>
       <h3 className="page-heading">Tempo search</h3>
+
+      <div className={styles.infoText}>
+        Modify how traces are searched
+        <DocsLinkButton hrefSuffix="tempo/#tempo-search" />
+      </div>
+
       <InlineFieldRow className={styles.row}>
         <InlineField tooltip="Removes the search tab from the query editor" label="Hide search" labelWidth={26}>
           <InlineSwitch
@@ -46,14 +54,3 @@ export function TraceQLSearchSettings({ options, onOptionsChange }: Props) {
     </div>
   );
 }
-
-const styles = {
-  container: css`
-    label: container;
-    width: 100%;
-  `,
-  row: css`
-    label: row;
-    align-items: baseline;
-  `,
-};