diff --git a/.vscode/markdown.code-snippets b/.vscode/markdown.code-snippets index 257fc1b491..e269cdbf98 100644 --- 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": "[${1:${TM_SELECTED_TEXT}}](${0:The content in the tooltip})" + "body": "${1:${TM_SELECTED_TEXT}} || ${0:The content in the tooltip}" }, "Abbreviation": { "prefix": "@abbreviation", diff --git a/src/components/Tooltip.astro b/src/components/Tooltip.astro index 520e00e586..c1313831f3 100644 --- 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 index e5a45db0d2..22c6afd4d5 100644 --- a/src/components/atlas/BuildTooltip.tsx +++ b/src/components/atlas/BuildTooltip.tsx @@ -10,8 +10,8 @@ const BuildTooltip: FC<{ <> {props.content}} > {props.children} diff --git a/src/content/docs/en/kitchen-sink/typography.mdx b/src/content/docs/en/kitchen-sink/typography.mdx index dbe25ce2ee..a56621e53e 100644 --- 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 `` component. This component transf - - -Tooltips only support single line content. - - - Tooltips can be written using the `` 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 ``` This is content that needs a tooltip || Here it is! + +### 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" + +`resolveLinkWithUrl` method || +``` + +import ResolveLinkWithUrl from "@ios-signatures/ADJLinkResolution/resolveLinkWithUrl.mdx" + +`resolveLinkWithUrl` method ||