feat: Improve tooltip syntax

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

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/src/components/Tooltip.astro b/src/components/Tooltip.astro
@@ -12,7 +12,8 @@ let content = "";
 let toolTipContent = "";
 let body = "";
 
-const tooltipRegex = /\[(.*)\]\((.*)\)/;
+// Matchs the pattern "text || text"
+const tooltipRegex = /(.*)\s\|\|\s(.*)/m;
 
 if (Astro.slots.has("default")) {
   content = await Astro.slots.render("default");
@@ -25,6 +26,7 @@ if (Astro.slots.has("default")) {
 }
 ---
 
-<BuildTooltip position={position} client:only="react" content={toolTipContent}>
+<BuildTooltip position={position} client:only="react">
   <Fragment set:html={body} name="children" />
+  <Fragment set:html={toolTipContent} slot="content" />
 </BuildTooltip>
diff --git a/src/components/atlas/BuildTooltip.tsx b/src/components/atlas/BuildTooltip.tsx
@@ -6,7 +6,6 @@ const BuildTooltip: FC<{
   children: ReactElement;
   position?: Position;
 }> = (props) => {
-  console.log(props);
   return (
     <>
       <Tooltip

diff --git a/src/content/docs/en/kitchen-sink/typography.mdx b/src/content/docs/en/kitchen-sink/typography.mdx
@@ -122,32 +122,46 @@ Abbreviations can be written using the `<Abbr>` component. This component transf
 
 </Table>
 
-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).
+<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
+<Tooltip>This is content that needs a tooltip || Here it is!</Tooltip>
+```
+
+<Tooltip>This is content that needs a tooltip || Here it is!</Tooltip>
+
+You can use standard markdown syntax in tooltips.
 
 ```mdx
-<Tooltip>[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip>**Markdown** _Syntax_ [is available](https://markdownguide.org) || _Even_ **in** ~the tooltip~</Tooltip>
 ```
 
-<Tooltip>[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip>**Markdown** _Syntax_ [is available](https://markdownguide.org) || _Even_ **in** ~the tooltip~</Tooltip>
 
 ### Custom position
 
 Tooltips are shown above the content by default. You can customize the position of the tooltip by passing a `position` prop.
 
 ```mdx
-<Tooltip position="bottom">[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip position="bottom">This is content that needs a tooltip || Here it is!</Tooltip>
 ```
 
-<Tooltip position="bottom">[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip position="bottom">This is content that needs a tooltip || Here it is!</Tooltip>
 
 ```mdx
-<Tooltip position="left">[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip position="left">This is content that needs a tooltip || Here it is!</Tooltip>
 ```
 
-<Tooltip position="left">[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip position="left">This is content that needs a tooltip || Here it is!</Tooltip>
 
 ```mdx
-<Tooltip position="right">[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip position="right">This is content that needs a tooltip || Here it is!</Tooltip>
 ```
 
-<Tooltip position="right">[This is content that needs a tooltip](Here it is!)</Tooltip>
+<Tooltip position="right">This is content that needs a tooltip || Here it is!</Tooltip>