tooltip option ui

public/app/plugins/panel/canvas/module.tsx

@@ -1,6 +1,7 @@
 import { FieldConfigProperty, PanelOptionsEditorBuilder, PanelPlugin } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
+import { TooltipDisplayMode } from '@grafana/schema/dist/esm/common/common.gen';
 import { FrameState } from 'app/features/canvas/runtime/frame';
 
 import { CanvasPanel, InstanceState } from './CanvasPanel';
@@ -12,7 +13,7 @@ import { canvasMigrationHandler } from './migrations';
 import { Options } from './panelcfg.gen';
 
 export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilder<Options>) => {
-  const category = [t('canvas.category-canvas', 'Canvas')];
+  let category = [t('canvas.category-canvas', 'Canvas')];
   builder.addBooleanSwitch({
     path: 'inlineEditing',
     name: t('canvas.name-inline-editing', 'Inline editing'),
@@ -56,6 +57,27 @@ export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilde
     defaultValue: false,
     showIf: (opts) => config.featureToggles.canvasPanelPanZoom && opts.panZoom,
   });
+
+  category = [t('canvas.category-tooltip', 'Tooltip')];
+
+  builder.addRadio({
+    path: 'tooltip.mode',
+    name: t('canvas.tooltip-options.name-tooltip-mode', 'Tooltip mode'),
+    category,
+    defaultValue: TooltipDisplayMode.Single,
+    settings: {
+      options: [
+        {
+          value: TooltipDisplayMode.Single,
+          label: t('canvas.tooltip-options.tooltip-mode-options.label-enabled', 'Enabled'),
+        },
+        {
+          value: TooltipDisplayMode.None,
+          label: t('canvas.tooltip-options.tooltip-mode-options.label-disabled', 'Disabled'),
+        },
+      ],
+    },
+  });
 };
 
 export const plugin = new PanelPlugin<Options>(CanvasPanel)

public/locales/en-US/grafana.json

@@ -3686,6 +3686,7 @@
     "category-selected-connection": "Selected connection",
     "category-selected-element": "Selected element ({{element}})",
     "category-size": "Size",
+    "category-tooltip": "Tooltip",
     "cloud-item": {
       "category-cloud": "Cloud",
       "label": {
@@ -3930,6 +3931,13 @@
         "auto": "Auto"
       }
     },
+    "tooltip-options": {
+      "name-tooltip-mode": "Tooltip mode",
+      "tooltip-mode-options": {
+        "label-disabled": "Disabled",
+        "label-enabled": "Enabled"
+      }
+    },
     "tree-navigation-editor": {
       "clear-selection": "Clear selection",
       "frame-selection": "Frame selection",