Commit 05df8d7

@@ -1,5 +1,6 @@
 export { default as Collapse } from './Collapse.astro';
 export { default as Repl } from './Repl.astro';
+export { default as RepoCard } from './RepoCard.astro';
 export { default as Tabs } from './Tabs.astro';
 export { default as TabItem } from './TabItem.astro';
-export { default as RepoCard } from './RepoCard.astro';
+export { default as Tooltip } from './Tooltip.astro';

@@ -0,0 +1,26 @@
+---
+interface Props {
+  tip: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const { tip, position } = Astro.props;
+const tooltipClass = (() => {
+  switch (position) {
+    case 'top':
+      return 'tooltip tooltip-top';
+    case 'bottom':
+      return 'tooltip tooltip-bottom';
+    case 'left':
+      return 'tooltip tooltip-left';
+    case 'right':
+      return 'tooltip tooltip-right';
+    default:
+      return 'tooltip tooltip-top';
+  }
+})();
+---
+
+<div class={tooltipClass} data-tip={tip}>
+  <slot />
+</div>

@@ -9,7 +9,7 @@ tags:
 published: 2025-02-10T21:23:23+08:00
 ---
 
-import { Collapse, Repl, RepoCard, TabItem, Tabs } from '@components/user';
+import { Collapse, Repl, RepoCard, TabItem, Tabs, Tooltip } from '@components/user';
 
 Components let you easily reuse a piece of UI or styling consistently. You can use them not just in `.astro` files, but also in `.mdx` files.
 
@@ -142,6 +142,54 @@ Components let you easily reuse a piece of UI or styling consistently. You can u
   </Fragment>
 </Repl>
 
+## Inline Containers
+
+### Tooltip
+<Repl>
+  <div class="flex flex-col gap-2 w-fit mx-auto">
+    <Tooltip tip="I'm here!" position="top">
+      Hover me
+    </Tooltip>
+    <Tooltip tip="I'm here!" position="bottom">
+      Hover me
+    </Tooltip>
+    <Tooltip tip="I'm here!" position="left">
+      Hover me
+    </Tooltip>
+    <Tooltip tip="I'm here!" position="right">
+      Hover me
+    </Tooltip>
+  </div>
+  <Fragment slot="desc">
+  <Tabs>
+    <TabItem label="mdx" active>
+      ```jsx
+      <Tooltip tip="I'm here!" position="top">
+        Hover me
+      </Tooltip>
+      <Tooltip tip="I'm here!" position="bottom">
+        Hover me
+      </Tooltip>
+      <Tooltip tip="I'm here!" position="left">
+        Hover me
+      </Tooltip>
+      <Tooltip tip="I'm here!" position="right">
+        Hover me
+      </Tooltip>
+      ```
+    </TabItem>
+    <TabItem label="md">
+      ```md
+      ::tooltip[Hover me]{tip="I'm here!" position="top"}
+      ::tooltip[Hover me]{tip="I'm here!" position="bottom"}
+      ::tooltip[Hover me]{tip="I'm here!" position="left"}
+      ::tooltip[Hover me]{tip="I'm here!" position="right"}
+      ```
+    </TabItem>
+  </Tabs>
+  </Fragment>
+</Repl>
+
 ## Web Contents
 
 ### RepoCard

@@ -26,4 +26,16 @@ const Collapse = function (
   return h('div', { class: wrapperClassName }, [inputNode, titleNode, contentNode]);
 };
 
-export const rehypeComponentsList = { collapse: Collapse };
+const Tooltip = function (
+  props: {
+    tip: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+  },
+  children: Child
+) {
+  const { tip, position } = props;
+  const wrapperClassName = 'tooltip tooltip-' + (position || 'top');
+  return h('div', { class: wrapperClassName, 'data-tip': tip }, children);
+};
+
+export const rehypeComponentsList = { collapse: Collapse, tooltip: Tooltip };