@delightui/components 0.1.104 → 0.1.106

package/docs/components/atoms/Tooltip.md

@@ -0,0 +1,391 @@
+# Tooltip
+
+## Description
+
+A contextual tooltip component that displays helpful information when users interact with elements. Supports multiple trigger actions (hover, click, follow), positioning options, and customizable styling with arrow indicators for enhanced user experience.
+
+## Aliases
+
+- Tooltip
+- Popover
+- Hint
+- Help Text
+- Info Bubble
+
+## Props Breakdown
+
+**Extends:** Standalone interface (no HTML element inheritance)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | No | The content displayed inside the tooltip |
+| `direction` | `'Top' \| 'Bottom' \| 'Right' \| 'Left'` | `'Top'` | No | Direction where the tooltip appears relative to target |
+| `alignment` | `'Start' \| 'End' \| 'Center'` | `'Center'` | No | Alignment of the tooltip relative to the target |
+| `action` | `'Click' \| 'Hover' \| 'Follow'` | `'Hover'` | No | Event that triggers tooltip visibility |
+| `isVisible` | `boolean` | `false` | No | Whether the tooltip is initially visible |
+| `target` | `ReactNode` | - | No | The target element that triggers the tooltip |
+| `style` | `'Default' \| 'Outlined'` | `'Default'` | No | Visual style variant of the tooltip |
+| `className` | `string` | - | No | Additional CSS class names |
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Tooltip, Button } from '@delightui/components';
+
+function BasicExample() {
+  return (
+    <Tooltip 
+      target={<Button>Hover me</Button>}
+    >
+      This is a helpful tooltip message!
+    </Tooltip>
+  );
+}
+```
+
+### Tooltip Directions
+```tsx
+function DirectionsExample() {
+  return (
+    <div className="tooltip-directions">
+      <Tooltip 
+        direction="Top"
+        target={<Button>Top Tooltip</Button>}
+      >
+        Tooltip appears above
+      </Tooltip>
+      
+      <Tooltip 
+        direction="Bottom"
+        target={<Button>Bottom Tooltip</Button>}
+      >
+        Tooltip appears below
+      </Tooltip>
+      
+      <Tooltip 
+        direction="Left"
+        target={<Button>Left Tooltip</Button>}
+      >
+        Tooltip appears to the left
+      </Tooltip>
+      
+      <Tooltip 
+        direction="Right"
+        target={<Button>Right Tooltip</Button>}
+      >
+        Tooltip appears to the right
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Tooltip Alignments
+```tsx
+function AlignmentExample() {
+  return (
+    <div className="tooltip-alignments">
+      <Tooltip 
+        direction="Bottom"
+        alignment="Start"
+        target={<Button>Start Aligned</Button>}
+      >
+        Aligned to start of target
+      </Tooltip>
+      
+      <Tooltip 
+        direction="Bottom"
+        alignment="Center"
+        target={<Button>Center Aligned</Button>}
+      >
+        Aligned to center of target
+      </Tooltip>
+      
+      <Tooltip 
+        direction="Bottom"
+        alignment="End"
+        target={<Button>End Aligned</Button>}
+      >
+        Aligned to end of target
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Trigger Actions
+```tsx
+function ActionsExample() {
+  return (
+    <div className="tooltip-actions">
+      <Tooltip 
+        action="Hover"
+        target={<Button>Hover Action</Button>}
+      >
+        Shows on hover (default)
+      </Tooltip>
+      
+      <Tooltip 
+        action="Click"
+        target={<Button>Click Action</Button>}
+      >
+        Shows on click - click again to hide
+      </Tooltip>
+      
+      <Tooltip 
+        action="Follow"
+        target={<Button>Follow Action</Button>}
+      >
+        Follows your cursor on hover
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Tooltip Styles
+```tsx
+function StylesExample() {
+  return (
+    <div className="tooltip-styles">
+      <Tooltip 
+        style="Default"
+        target={<Button>Default Style</Button>}
+      >
+        Default tooltip appearance
+      </Tooltip>
+      
+      <Tooltip 
+        style="Outlined"
+        target={<Button>Outlined Style</Button>}
+      >
+        Outlined tooltip appearance
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Icon Tooltips
+```tsx
+import { Icon, Tooltip } from '@delightui/components';
+
+function IconTooltipsExample() {
+  return (
+    <div className="icon-tooltips">
+      <Tooltip 
+        target={<Icon icon="Info" />}
+        direction="Top"
+      >
+        Additional information about this feature
+      </Tooltip>
+      
+      <Tooltip 
+        target={<Icon icon="Help" />}
+        direction="Right"
+      >
+        Get help with this section
+      </Tooltip>
+      
+      <Tooltip 
+        target={<Icon icon="Warning" />}
+        direction="Bottom"
+        style="Outlined"
+      >
+        Warning: This action cannot be undone
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Form Field Tooltips
+```tsx
+import { Tooltip, Input, FormField, Icon } from '@delightui/components';
+
+function FormTooltipsExample() {
+  return (
+    <div className="form-tooltips">
+      <FormField 
+        name="email" 
+        label={
+          <div className="label-with-tooltip">
+            Email Address
+            <Tooltip 
+              target={<Icon icon="Info" size="Small" />}
+              direction="Right"
+            >
+              We'll never share your email with anyone
+            </Tooltip>
+          </div>
+        }
+      >
+        <Input 
+          inputType="Email"
+          placeholder="Enter your email"
+        />
+      </FormField>
+
+      <FormField 
+        name="password" 
+        label={
+          <div className="label-with-tooltip">
+            Password
+            <Tooltip 
+              target={<Icon icon="Help" size="Small" />}
+              direction="Top"
+            >
+              Password must be at least 8 characters long and contain uppercase, lowercase, and numbers
+            </Tooltip>
+          </div>
+        }
+      >
+        <Input 
+          inputType="Password"
+          placeholder="Enter password"
+        />
+      </FormField>
+    </div>
+  );
+}
+```
+
+### Rich Content Tooltips
+```tsx
+function RichContentExample() {
+  return (
+    <div className="rich-content-tooltips">
+      <Tooltip 
+        target={<Button>Product Info</Button>}
+        direction="Bottom"
+        style="Default"
+      >
+        <div className="tooltip-content">
+          <h4>Premium Plan</h4>
+          <ul>
+            <li>Unlimited projects</li>
+            <li>Advanced analytics</li>
+            <li>Priority support</li>
+          </ul>
+          <p><strong>$29/month</strong></p>
+        </div>
+      </Tooltip>
+      
+      <Tooltip 
+        target={<Button>Status</Button>}
+        direction="Right"
+      >
+        <div className="status-tooltip">
+          <Icon icon="Check" style="Filled" />
+          <span>All systems operational</span>
+        </div>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Interactive Tooltips
+```tsx
+function InteractiveExample() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div className="interactive-tooltips">
+      <Tooltip 
+        isVisible={isVisible}
+        target={
+          <Button onClick={() => setIsVisible(!isVisible)}>
+            Toggle Tooltip
+          </Button>
+        }
+      >
+        This tooltip is controlled programmatically
+      </Tooltip>
+      
+      <Tooltip 
+        action="Click"
+        target={<Button>Settings</Button>}
+      >
+        <div className="interactive-content">
+          <p>Quick Settings</p>
+          <Button size="Small">Enable notifications</Button>
+          <Button size="Small" style="Secondary">
+            Change theme
+          </Button>
+        </div>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Accessibility Example
+```tsx
+function AccessibilityExample() {
+  return (
+    <div className="accessibility-tooltips">
+      <Tooltip 
+        target={
+          <Button 
+            aria-describedby="tooltip-1"
+            aria-label="Save document with tooltip help"
+          >
+            Save
+          </Button>
+        }
+      >
+        <div id="tooltip-1">
+          Save your document to the cloud. 
+          Keyboard shortcut: Ctrl+S
+        </div>
+      </Tooltip>
+      
+      <Tooltip 
+        target={
+          <Icon 
+            icon="Info" 
+            aria-describedby="info-tooltip"
+            tabIndex={0}
+          />
+        }
+        action="Click"
+      >
+        <div id="info-tooltip">
+          This feature is available in the premium plan. 
+          Upgrade your account to access advanced features.
+        </div>
+      </Tooltip>
+    </div>
+  );
+}
+```
+
+### Custom Styling
+```tsx
+function CustomStylingExample() {
+  return (
+    <div className="custom-tooltip-styling">
+      <Tooltip 
+        target={<Button>Custom Tooltip</Button>}
+        className="custom-tooltip-class"
+        direction="Top"
+      >
+        This tooltip has custom styling applied
+      </Tooltip>
+      
+      <Tooltip 
+        target={<Button>Error Tooltip</Button>}
+        className="error-tooltip"
+        style="Outlined"
+      >
+        <div className="error-content">
+          <Icon icon="Error" />
+          Something went wrong! Please try again.
+        </div>
+      </Tooltip>
+    </div>
+  );
+}
+```