Include label in Input

docs/components/checkbox.md

@@ -1,6 +1,6 @@
 # Checkbox
 
-Toggle checkbox component with label, tooltip support, and reactive state management.
+Toggle checkbox component with label support and reactive state management.
 
 ## Tag
 
@@ -12,7 +12,6 @@ Toggle checkbox component with label, tooltip support, and reactive state manage
 | :--- | :--- | :--- | :--- |
 | `label` | `string` | `-` | Label text for the checkbox |
 | `value` | `boolean \| Signal<boolean>` | `false` | Checked state |
-| `tooltip` | `string` | `-` | Tooltip text on hover |
 | `toggle` | `boolean` | `false` | Display as toggle switch instead of checkbox |
 | `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
 | `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
@@ -93,29 +92,6 @@ const ToggleDemo = () => {
 Mount(ToggleDemo, '#demo-toggle');
 ```
 
-### With Tooltip
-
-<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
-  <div class="card-body">
-    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
-  </div>
-</div>
-
-```javascript
-const TooltipDemo = () => {
-  const darkMode = $(false);
-  
-  return Checkbox({
-    label: 'Dark mode',
-    value: darkMode,
-    tooltip: 'Enable dark theme preference',
-    onclick: () => darkMode(!darkMode())
-  });
-};
-Mount(TooltipDemo, '#demo-tooltip');
-```
-
 ### Disabled State
 
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
@@ -196,6 +172,32 @@ const MultipleDemo = () => {
 Mount(MultipleDemo, '#demo-multiple');
 ```
 
+### With Tooltip
+
+<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
+  <div class="card-body">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
+    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
+  </div>
+</div>
+
+```javascript
+const TooltipDemo = () => {
+  const accepted = $(false);
+  
+  return Tooltip({ 
+    tip: "You must accept the terms to continue" 
+  }, 
+    Checkbox({
+      label: 'I accept the terms',
+      value: accepted,
+      onclick: () => accepted(!accepted())
+    })
+  );
+};
+Mount(TooltipDemo, '#demo-tooltip');
+```
+
 ### All Variants
 
 <div class="card bg-base-200 border border-base-300 shadow-sm my-6">
@@ -287,4 +289,4 @@ const FormDemo = () => {
   ]);
 };
 Mount(FormDemo, '#demo-form');
-```
+```