fix: tooltip, assert children is valid element (#96)

lib/Tooltip/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { isValidElement } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { useState } from "react";
 import { cn } from "../utils";
@@ -12,11 +12,13 @@ export default function Tooltip({
   sideOffset = 2,
   hideOnClick = true,
   className = "",
-  asChild = false,
+  asChild,
   ...restProps
 }) {
   const [open, setOpen] = useState(defaultOpen);
 
+  const shouldAsChild = asChild ?? isValidElement(children);
+
   const tooltipContent = content && (
     <RadixTooltip.Portal>
       <RadixTooltip.Content
@@ -43,7 +45,7 @@ export default function Tooltip({
         {...restProps}
       >
         <RadixTooltip.Trigger
-          asChild={asChild}
+          asChild={shouldAsChild}
           onMouseEnter={() => setOpen(true)}
           onMouseLeave={() => setOpen(false)}
           className={className}

src/stories/Tooltip.stories.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import Tooltip from "../../lib/Tooltip";
+
+export default {
+  title: "Tooltip",
+  component: Tooltip,
+};
+export const Primary = () => (
+  <div>
+    <Tooltip content={"tooltip content"}>{"hover me"}</Tooltip>
+  </div>
+);
+
+export const elementOrComponent = () => {
+  return (
+    <div>
+      <Tooltip content={"element/component"}>
+        <span>hover span</span>
+      </Tooltip>
+    </div>
+  );
+};