Tooltip / Toggletip content link styling: Remove global a element selector inside tooltips (#84353)

* fix: remove global a tag styles inside tooltips

* corret inside / outside button references in toggletip test

* Remove code and pre styling rules from tooltipUtils

packages/grafana-ui/src/components/Toggletip/Toggletip.test.tsx

@@ -2,7 +2,7 @@
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { Button } from '../Button';
+import { Button, LinkButton } from '../Button';
 
 import { Toggletip } from './Toggletip';
 
@@ -234,4 +234,30 @@ describe('Toggletip', () => {
       expect(afterButton).toHaveFocus();
     });
   });
+
+  it(`should render LinkButtons correctly with no additional styles`, () => {
+    const identicalProps = {
+      children: 'Click me!',
+      href: 'https://grafana.com',
+    };
+
+    const outsideLinkButton = <LinkButton {...identicalProps} data-testid="outside" />;
+    const insideLinkButton = <LinkButton {...identicalProps} data-testid="inside" />;
+
+    render(
+      <>
+        <Toggletip placement="auto" content={insideLinkButton} show>
+          <Button type="button" data-testid="myButton">
+            Click me!
+          </Button>
+        </Toggletip>
+        {outsideLinkButton}
+      </>
+    );
+
+    const outsideButton = screen.getByTestId('outside');
+    const insideButton = screen.getByTestId('inside');
+
+    expect(getComputedStyle(outsideButton).cssText).toStrictEqual(getComputedStyle(insideButton).cssText);
+  });
 });

packages/grafana-ui/src/utils/tooltipUtils.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { Placement } from '@floating-ui/react';
 
-import { colorManipulator, GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 import { TooltipPlacement } from '../components/Tooltip';
 
@@ -45,28 +45,6 @@ export function buildTooltipTheme(
       "&[data-popper-interactive='false']": {
         pointerEvents: 'none',
       },
-
-      code: {
-        border: 'none',
-        display: 'inline',
-        background: colorManipulator.darken(tooltipBg, 0.1),
-        color: tooltipText,
-        whiteSpace: 'normal',
-      },
-
-      pre: {
-        background: colorManipulator.darken(tooltipBg, 0.1),
-        color: tooltipText,
-      },
-
-      a: {
-        color: tooltipText,
-        textDecoration: 'underline',
-      },
-
-      'a:hover': {
-        textDecoration: 'none',
-      },
     }),
     headerClose: css({
       color: theme.colors.text.secondary,