Add tooltip

.vscode/markdown.code-snippets

@@ -146,8 +146,13 @@
          "</Tabs>"
       ]
    },
+   "Tooltip": {
+      "prefix": "@tooltip",
+      "description": "Insert content accompanied by a tooltip",
+      "body": "<Tooltip>${1:${TM_SELECTED_TEXT}} || ${0:The content in the tooltip}</Tooltip>"
+   },
    "Abbreviation": {
-      "prefix": "abbreviation",
+      "prefix": "@abbreviation",
       "description": "Insert an abbreviation",
       "body": "<Abbr>${0:$TM_SELECTED_TEXT}</Abbr>"
    }

astro.config.mjs

@@ -35,6 +35,7 @@ export default defineConfig({
         "@components/Tab.astro",
         "@components/Abbr.astro",
         "@components/Badge.astro",
+        "@components/Tooltip.astro",
       ],
     }),
     // Enable React for the Algolia search component.

src/components/Abbr.astro

@@ -1,4 +1,6 @@
 ---
+import BuildTooltip from "./atlas/BuildTooltip";
+
 let content = "";
 const regex = /(^.*?(?=\())\(([^\)]+)\)/;
 
@@ -11,4 +13,7 @@ const body = match[1].trim()
 const title = match[2]
 ---
 
-<abbr title={title}>{body}</abbr>
+<BuildTooltip client:only="react">
+  <Fragment set:html={body} name="children" />
+  <Fragment set:html={title} slot="content" />
+</BuildTooltip>

src/components/Tooltip.astro

@@ -0,0 +1,32 @@
+---
+import type { Position } from "@adjust/components";
+import BuildTooltip from "@components/atlas/BuildTooltip";
+
+export interface Props {
+  position: Position;
+}
+
+const { position } = Astro.props as Props;
+
+let content = "";
+let toolTipContent = "";
+let body = "";
+
+// Matchs the pattern "text || text"
+const tooltipRegex = /(.*)\n?\s\|\|\s\n?((.|\n)*)/m;
+
+if (Astro.slots.has("default")) {
+  content = await Astro.slots.render("default");
+  if (tooltipRegex.test(content)) {
+    let regex = tooltipRegex.exec(content);
+    body = regex?.[1]!;
+    toolTipContent = regex?.[2]!;
+    content = body;
+  }
+}
+---
+
+<BuildTooltip position={position} client:only="react">
+  <Fragment set:html={body} name="children" />
+  <Fragment set:html={toolTipContent} slot="content" />
+</BuildTooltip>

src/components/atlas/BuildTooltip.tsx

@@ -0,0 +1,22 @@
+import { Position, Tooltip } from "@adjust/components";
+import type { FC, ReactNode, ReactElement } from "react";
+
+const BuildTooltip: FC<{
+  content: ReactNode;
+  children: ReactElement;
+  position?: Position;
+}> = (props) => {
+  return (
+    <>
+      <Tooltip
+        position={props.position ? props.position : "top"}
+        zIndex={100}
+        content={<div style={{ maxWidth: "fit-content" }}>{props.content}</div>}
+      >
+        <span className="underline decoration-dashed">{props.children}</span>
+      </Tooltip>
+    </>
+  );
+};
+
+export default BuildTooltip;

src/content/docs/en/kitchen-sink/typography.mdx

@@ -13,15 +13,15 @@ Icons should be used to visually clarify information, or to show how an interfac
 
 <Table>
 
-| Prop|  Data type| Required| Description|
-| --- | --- | --- | --- |
-| `name`|  String| Yes| The name of the icon you want to render. See [the list of icons in ATLAS](https://atlas.adeven.com/docs/components/Icon#available-icons)|
+| Prop   | Data type | Required | Description                                                                                                                              |
+| ------ | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `name` | String    | Yes      | The name of the icon you want to render. See [the list of icons in ATLAS](https://atlas.adeven.com/docs/components/Icon#available-icons) |
 
 </Table>
 
 ### Example
 
-```mdx "<Icon name=\"Copy\" />"
+```mdx "<Icon name="Copy" />"
 Select the copy button (<Icon name="Copy" />).
 ```
 
@@ -33,10 +33,10 @@ Badges are used to visually highlight inline content.
 
 <Table>
 
-| Prop |  Data type | Required | Description |
-| --- | --- | --- | --- |
-| `color` |  String | No. Defaults to `info` | The color of the badge. `info` \| `note` \| `tip` \| `warning` \| `important` |
-| `icon` |  String | No | The name of the icon you want to render. See [the list of icons in ATLAS](https://atlas.adeven.com/docs/components/Icon#available-icons) |
+| Prop    | Data type | Required               | Description                                                                                                                              |
+| ------- | --------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `color` | String    | No. Defaults to `info` | The color of the badge. `info` \| `note` \| `tip` \| `warning` \| `important`                                                            |
+| `icon`  | String    | No                     | The name of the icon you want to render. See [the list of icons in ATLAS](https://atlas.adeven.com/docs/components/Icon#available-icons) |
 
 </Table>
 
@@ -61,14 +61,18 @@ Badges can be styled the same way as [Callouts](/en/kitchen-sink/callouts) by pa
 You can pass an ATLAS icon to the badge to add visual clarity.
 
 ```mdx
-<Badge color="warning" icon="Warning">Warning with icon</Badge>
+<Badge color="warning" icon="Warning">
+   Warning with icon
+</Badge>
 ```
 
-<Badge color="warning" icon="Warning">Warning with icon</Badge>
+<Badge color="warning" icon="Warning">
+   Warning with icon
+</Badge>
 
 ## Interface labels
 
-Interface labels are used to denote that text refers to a label in the interface of the tool in question. 
+Interface labels are used to denote that text refers to a label in the interface of the tool in question.
 
 <Callout type="note">
 
@@ -100,10 +104,72 @@ Select <MenuSelection>File --> My Profile --> Billing</MenuSelection>
 
 ## Abbreviations
 
-Abbreviations can be written using the `<Abbr>` component. This component transforms content written as `${Abbreviation} (${expanded version})` into native HTML [`<abbr>` tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).
+Abbreviations can be written using the `<Abbr>` component. This component transforms content written as `${Abbreviation} (${expanded version})` into an [Atlas `Tooltip` component](https://atlas.adeven.com/docs/components/Tooltip).
 
 ```mdx
 <Abbr>RTBF (Right to be forgotten)</Abbr>
 ```
 
 <Abbr>RTBF (Right to be forgotten)</Abbr>
+
+## Tooltips
+
+<Table height="full-height">
+
+| Prop       | Data type                                                             | Required | Description                                                                                               |
+| ---------- | --------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| `position` | [Position](https://atlas.adeven.com/docs/components/Tooltip#position) | No       | The position you want the tooltip to appear at. `top` \| `right` \| `bottom` \| `left`. Defaults to `top` |
+
+</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).
+
+```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>**Markdown** _Syntax_ [is available](https://markdownguide.org) || _Even_ **in** ~the tooltip~</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>
+
+```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>
+
+```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>
+
+### 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>