feat: Add Tooltip Snap custom UI component (#25413)

## **Description**

This adds the new `Tooltip` component to the Snap custom UI renderer.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25413?quickstart=1)

## **Related issues**

Fixes: #25385 

## **Manual testing steps**

1. Go to
[tests-snaps](https://metamask.github.io/snaps/test-snaps/latest/).
2. Install the JSX example snap.
3. click `Show JSX dialog`.
4. hover on the `Count` text.
5. Observe the Tooltip

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->


![image](https://github.com/MetaMask/metamask-extension/assets/13910212/9ec07473-2b58-495d-9700-9560ed378b86)

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/components/app/metamask-template-renderer/safe-component-list.js

@@ -33,6 +33,7 @@ import { SnapUIForm } from '../snaps/snap-ui-form';
 import { SnapUIButton } from '../snaps/snap-ui-button';
 import { SnapUIDropdown } from '../snaps/snap-ui-dropdown';
 import { SnapUICheckbox } from '../snaps/snap-ui-checkbox';
+import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
 ///: END:ONLY_INCLUDE_IF
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
@@ -87,6 +88,7 @@ export const safeComponentList = {
   SnapUIForm,
   SnapUIDropdown,
   SnapUICheckbox,
+  SnapUITooltip,
   ///: END:ONLY_INCLUDE_IF
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   CreateSnapAccount,

ui/components/app/snaps/snap-ui-renderer/components/index.ts

@@ -17,6 +17,7 @@ import { field } from './field';
 import { dropdown } from './dropdown';
 import { value } from './value';
 import { checkbox } from './checkbox';
+import { tooltip } from './tooltip';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -38,4 +39,5 @@ export const COMPONENT_MAPPING = {
   Dropdown: dropdown,
   Value: value,
   Checkbox: checkbox,
+  Tooltip: tooltip,
 };

ui/components/app/snaps/snap-ui-renderer/components/tooltip.ts

@@ -0,0 +1,23 @@
+import { JSXElement, Text, TooltipElement } from '@metamask/snaps-sdk/jsx';
+import { getJsxChildren } from '@metamask/snaps-utils';
+import { mapToTemplate } from '../utils';
+import { UIComponentFactory } from './types';
+
+export const tooltip: UIComponentFactory<TooltipElement> = ({
+  element,
+  ...params
+}) => ({
+  element: 'SnapUITooltip',
+  children: getJsxChildren(element).map((children) =>
+    mapToTemplate({ element: children as JSXElement, ...params }),
+  ),
+  propComponents: {
+    content: mapToTemplate({
+      element:
+        typeof element.props.content === 'string'
+          ? Text({ children: element.props.content })
+          : element.props.content,
+      ...params,
+    }),
+  },
+});

ui/components/app/snaps/snap-ui-tooltip/index.ts

@@ -0,0 +1 @@
+export * from './snap-ui-tooltip';

ui/components/app/snaps/snap-ui-tooltip/snap-ui-tooltip.tsx

@@ -0,0 +1,22 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import Tooltip from '../../../ui/tooltip';
+
+export type SnapUITooltipProps = {
+  content: ReactNode;
+};
+
+export const SnapUITooltip: FunctionComponent<SnapUITooltipProps> = ({
+  content,
+  children,
+}) => {
+  return (
+    <Tooltip
+      html={content}
+      position={'bottom'}
+      // Avoid tooltip from taking up the full width of the container
+      style={{ display: 'inline-flex' }}
+    >
+      {children}
+    </Tooltip>
+  );
+};