chore(editor): update slash menu tooltips of latex and loom (#11350)

Close [BS-2983](https://linear.app/affine-design/issue/BS-2983/slash-menu-loom没有tooltip)
Close [BS-2953](https://linear.app/affine-design/issue/BS-2982/slash-menu中latex没有tooltip)

blocksuite/affine/blocks/block-embed/src/embed-loom-block/configs/slash-menu.ts

@@ -2,12 +2,18 @@ import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-
 import type { SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
 import { LoomLogoDuotoneIcon } from '@blocksuite/icons/lit';
 
+import { LoomTooltip } from './tooltips';
+
 export const embedLoomSlashMenuConfig: SlashMenuConfig = {
   items: [
     {
       name: 'Loom',
       icon: LoomLogoDuotoneIcon(),
       description: 'Embed a Loom video.',
+      tooltip: {
+        figure: LoomTooltip,
+        caption: 'loom',
+      },
       group: '4_Content & Media@9',
       when: ({ model }) =>
         model.doc.schema.flavourSchemaMap.has('affine:embed-loom'),

blocksuite/affine/blocks/block-latex/src/configs/slash-menu.ts

@@ -7,6 +7,7 @@ import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
 import { TeXIcon } from '@blocksuite/icons/lit';
 
 import { insertLatexBlockCommand } from '../commands';
+import { LatexTooltip } from './tooltips';
 
 export const latexSlashMenuConfig: SlashMenuConfig = {
   items: [
@@ -15,6 +16,14 @@ export const latexSlashMenuConfig: SlashMenuConfig = {
       group: '0_Basic@8',
       description: 'Create a inline equation.',
       icon: TeXIcon(),
+      tooltip: {
+        figure: LatexTooltip(
+          'Energy. Mass. Light. In a single equation,',
+          'E=mc^2',
+          false
+        ),
+        caption: 'Inline equation',
+      },
       searchAlias: ['inlineMath, inlineEquation', 'inlineLatex'],
       action: ({ std }) => {
         std.command
@@ -28,6 +37,14 @@ export const latexSlashMenuConfig: SlashMenuConfig = {
       name: 'Equation',
       description: 'Create a equation block.',
       icon: TeXIcon(),
+      tooltip: {
+        figure: LatexTooltip(
+          'Create a equation via LaTeX.',
+          String.raw`\frac{a}{b} \pm \frac{c}{d} = \frac{ad \pm bc}{bd}`,
+          true
+        ),
+        caption: 'Equation',
+      },
       searchAlias: ['mathBlock, equationBlock', 'latexBlock'],
       group: '4_Content & Media@10',
       action: ({ std }) => {

blocksuite/affine/blocks/block-latex/src/configs/tooltips.ts

@@ -0,0 +1,41 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import katex from 'katex';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+export const LatexTooltip = (
+  str: string,
+  latex: string,
+  displayMode: boolean = false
+) =>
+  html` <style>
+      .latex-tooltip {
+        background: ${unsafeCSSVarV2('layer/pureWhite')};
+        border-radius: 2px;
+        width: 170px;
+        padding: 5px 5px 5px 6px;
+        box-sizing: border-box;
+      }
+      .latex-tooltip-content {
+        width: 159px;
+        color: #121212;
+        font-family: var(--affine-font-family);
+        font-size: 10px;
+        font-style: normal;
+
+        .katex > math[display='block'] {
+          margin-top: 1em;
+        }
+      }
+    </style>
+    <div class="latex-tooltip">
+      <div class="latex-tooltip-content">
+        <span>${str}</span>
+        ${unsafeHTML(
+          katex.renderToString(latex, {
+            displayMode,
+            output: 'mathml',
+          })
+        )}
+      </div>
+    </div>`;