feat: Add support for imported content

adjust · Oct 24, 2023 · a7c28ff · a7c28ff
1 parent d050111
commit a7c28ff
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/.vscode/markdown.code-snippets b/.vscode/markdown.code-snippets
@@ -149,7 +149,7 @@
    "Tooltip": {
       "prefix": "@tooltip",
       "description": "Insert content accompanied by a tooltip",
-      "body": "<Tooltip>[${1:${TM_SELECTED_TEXT}}](${0:The content in the tooltip})</Tooltip>"
+      "body": "<Tooltip>${1:${TM_SELECTED_TEXT}} || ${0:The content in the tooltip}</Tooltip>"
    },
    "Abbreviation": {
       "prefix": "@abbreviation",

diff --git a/src/components/Tooltip.astro b/src/components/Tooltip.astro
@@ -13,7 +13,7 @@ let toolTipContent = "";
 let body = "";
 
 // Matchs the pattern "text || text"
-const tooltipRegex = /(.*)\s\|\|\s(.*)/m;
+const tooltipRegex = /(.*)\n?\s\|\|\s\n?((.|\n)*)/m;
 
 if (Astro.slots.has("default")) {
   content = await Astro.slots.render("default");

diff --git a/src/components/atlas/BuildTooltip.tsx b/src/components/atlas/BuildTooltip.tsx
@@ -10,8 +10,8 @@ const BuildTooltip: FC<{
     <>
       <Tooltip
         position={props.position ? props.position : "top"}
-        content={props.content}
         zIndex={100}
+        content={<div style={{ maxWidth: "fit-content" }}>{props.content}</div>}
       >
         <span className="underline decoration-dashed">{props.children}</span>
       </Tooltip>

diff --git a/src/content/docs/en/kitchen-sink/typography.mdx b/src/content/docs/en/kitchen-sink/typography.mdx
@@ -122,12 +122,6 @@ Abbreviations can be written using the `<Abbr>` component. This component transf
 
 </Table>
 
-<Callout type="important">
-
-Tooltips only support single line content.
-
-</Callout>
-
 Tooltips can be written using the `<Tooltip>` component. This component transforms content written as `${Article content} || %${Tooltip content}%` into an [Atlas `Tooltip` component](https://atlas.adeven.com/docs/components/Tooltip).
 
 ```mdx
@@ -165,3 +159,17 @@ Tooltips are shown above the content by default. You can customize the position
 ```
 
 <Tooltip position="right">This is content that needs a tooltip || Here it is!</Tooltip>
+
+### Imported content
+
+You can use MDX imports to add multi-line or reusable content to your tooltip. This is especially useful for content such as method signatures or concept definitions.
+
+```mdx
+import ResolveLinkWithUrl from "@ios-signatures/ADJLinkResolution/resolveLinkWithUrl.mdx"
+
+<Tooltip>`resolveLinkWithUrl` method || <ResolveLinkWithUrl /></Tooltip>
+```
+
+import ResolveLinkWithUrl from "@ios-signatures/ADJLinkResolution/resolveLinkWithUrl.mdx"
+
+<Tooltip>`resolveLinkWithUrl` method || <ResolveLinkWithUrl /></Tooltip>