# Tooltip

Tooltip component for displaying helpful hints and additional information on hover.

## Tag

`Tooltip`

## Props

| Prop         | Type                         | Default     | Description                                      |
| :----------- | :--------------------------- | :---------- | :----------------------------------------------- |
| `tip`        | `string \| VNode \| Signal`  | `-`         | Tooltip content to display on hover              |
| `class`      | `string`                     | `''`        | Additional CSS classes (DaisyUI + Tailwind)      |
| `children`   | `VNode`                      | `-`         | Element to attach the tooltip to                 |

## Live Examples

### Basic 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-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
    Tooltip({ tip: 'This is a tooltip' }, [
      Button({ class: 'btn btn-primary' }, 'Hover me')
    ]),
    Tooltip({ tip: 'Tooltips can be placed on any element' }, [
      Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
    ]),
    Tooltip({ tip: 'Icons can also have tooltips' }, [
      Icons.iconInfo
    ])
  ]);
};
Mount(BasicDemo, '#demo-basic');
```

### Tooltip Positions

<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-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
  </div>
</div>

```javascript
const PositionsDemo = () => {
  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
    Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
      Button({ class: 'btn btn-sm' }, 'Top')
    ]),
    Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
      Button({ class: 'btn btn-sm' }, 'Bottom')
    ]),
    Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
      Button({ class: 'btn btn-sm' }, 'Left')
    ]),
    Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
      Button({ class: 'btn btn-sm' }, 'Right')
    ])
  ]);
};
Mount(PositionsDemo, '#demo-positions');
```

### Tooltip with Icons

<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-icons" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8 justify-center"></div>
  </div>
</div>

```javascript
const IconsDemo = () => {
  return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
    Tooltip({ tip: 'Save document' }, [
      Button({ class: 'btn btn-ghost btn-circle' }, '💾')
    ]),
    Tooltip({ tip: 'Edit item' }, [
      Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
    ]),
    Tooltip({ tip: 'Delete permanently' }, [
      Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
    ]),
    Tooltip({ tip: 'Settings' }, [
      Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
    ])
  ]);
};
Mount(IconsDemo, '#demo-icons');
```

### Form Field Tooltips

<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-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const FormDemo = () => {
  const username = $('');
  const email = $('');
  
  return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
    Div({ class: 'flex items-center gap-2' }, [
      Input({
        label: 'Username',
        value: username,
        placeholder: 'Choose a username',
        oninput: (e) => username(e.target.value)
      }),
      Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
        Span({ class: 'cursor-help text-info' }, '?')
      ])
    ]),
    Div({ class: 'flex items-center gap-2' }, [
      Input({
        label: 'Email',
        type: 'email',
        value: email,
        placeholder: 'Enter your email',
        oninput: (e) => email(e.target.value)
      }),
      Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
        Span({ class: 'cursor-help text-info' }, '?')
      ])
    ])
  ]);
};
Mount(FormDemo, '#demo-form');
```

### Interactive 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-interactive" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const InteractiveDemo = () => {
  const showTip = $(false);
  const tooltipText = $('Hover over the button!');
  
  const updateTooltip = (text) => {
    tooltipText(text);
    setTimeout(() => {
      tooltipText('Hover over the button!');
    }, 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4 items-center' }, [
    Tooltip({ tip: () => tooltipText() }, [
      Button({ 
        class: 'btn btn-primary btn-lg',
        onclick: () => Toast('Button clicked!', 'alert-info', 2000)
      }, 'Interactive Button')
    ]),
    Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
      Button({ 
        class: 'btn btn-xs',
        onclick: () => updateTooltip('You clicked the button!')
      }, 'Change Tooltip'),
      Button({ 
        class: 'btn btn-xs',
        onclick: () => updateTooltip('Try hovering now!')
      }, 'Change Again')
    ])
  ]);
};
Mount(InteractiveDemo, '#demo-interactive');
```

### Rich Tooltip Content

<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-rich" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
  </div>
</div>

```javascript
const RichDemo = () => {
  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
    Tooltip({ 
      tip: Div({ class: 'text-left p-1' }, [
        Div({ class: 'font-bold' }, 'User Info'),
        Div({ class: 'text-xs' }, 'John Doe'),
        Div({ class: 'text-xs' }, 'john@example.com'),
        Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
      ])
    }, [
      Button({ class: 'btn btn-outline' }, 'User Profile')
    ]),
    Tooltip({ 
      tip: Div({ class: 'text-left p-1' }, [
        Div({ class: 'font-bold flex items-center gap-1' }, [
          Icons.iconWarning,
          Span({}, 'System Status')
        ]),
        Div({ class: 'text-xs' }, 'All systems operational'),
        Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
      ])
    }, [
      Button({ class: 'btn btn-outline' }, 'System Status')
    ])
  ]);
};
Mount(RichDemo, '#demo-rich');
```

### Color Variants

<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-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-4 justify-center"></div>
  </div>
</div>

```javascript
const ColorsDemo = () => {
  return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
    Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
      Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
    ]),
    Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
      Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
    ]),
    Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
      Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
    ]),
    Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
      Button({ class: 'btn btn-info btn-sm' }, 'Info')
    ]),
    Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
      Button({ class: 'btn btn-success btn-sm' }, 'Success')
    ]),
    Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
      Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
    ]),
    Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
      Button({ class: 'btn btn-error btn-sm' }, 'Error')
    ])
  ]);
};
Mount(ColorsDemo, '#demo-colors');
```

### All Tooltip Positions

<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-all-positions" class="bg-base-100 p-6 rounded-xl border border-base-300 grid grid-cols-3 gap-4 justify-items-center"></div>
  </div>
</div>

```javascript
const AllPositionsDemo = () => {
  return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
    Div({ class: 'col-start-2' }, [
      Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
        Button({ class: 'btn btn-sm w-24' }, 'Top')
      ])
    ]),
    Div({ class: 'col-start-1 row-start-2' }, [
      Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
        Button({ class: 'btn btn-sm w-24' }, 'Left')
      ])
    ]),
    Div({ class: 'col-start-2 row-start-2' }, [
      Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [
        Button({ class: 'btn btn-sm w-24' }, 'Center')
      ])
    ]),
    Div({ class: 'col-start-3 row-start-2' }, [
      Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
        Button({ class: 'btn btn-sm w-24' }, 'Right')
      ])
    ]),
    Div({ class: 'col-start-2 row-start-3' }, [
      Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
        Button({ class: 'btn btn-sm w-24' }, 'Bottom')
      ])
    ])
  ]);
};
Mount(AllPositionsDemo, '#demo-all-positions');
```

<script>
  (function() {
    const initTooltipExamples = () => {
      
      // 1. Basic Tooltip
      const basicTarget = document.querySelector('#demo-basic');
      if (basicTarget && !basicTarget.hasChildNodes()) {
        const BasicDemo = () => {
          return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
            Tooltip({ tip: 'This is a tooltip' }, [
              Button({ class: 'btn btn-primary' }, 'Hover me')
            ]),
            Tooltip({ tip: 'Tooltips can be placed on any element' }, [
              Span({ class: 'text-sm cursor-help border-b border-dashed' }, 'Help text')
            ]),
            Tooltip({ tip: 'Icons can also have tooltips' }, [
              Icons.iconInfo
            ])
          ]);
        };
        Mount(BasicDemo, basicTarget);
      }

      // 2. Tooltip Positions
      const positionsTarget = document.querySelector('#demo-positions');
      if (positionsTarget && !positionsTarget.hasChildNodes()) {
        const PositionsDemo = () => {
          return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
            Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
              Button({ class: 'btn btn-sm' }, 'Top')
            ]),
            Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
              Button({ class: 'btn btn-sm' }, 'Bottom')
            ]),
            Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
              Button({ class: 'btn btn-sm' }, 'Left')
            ]),
            Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
              Button({ class: 'btn btn-sm' }, 'Right')
            ])
          ]);
        };
        Mount(PositionsDemo, positionsTarget);
      }

      // 3. Tooltip with Icons
      const iconsTarget = document.querySelector('#demo-icons');
      if (iconsTarget && !iconsTarget.hasChildNodes()) {
        const IconsDemo = () => {
          return Div({ class: 'flex flex-wrap gap-8 justify-center' }, [
            Tooltip({ tip: 'Save document' }, [
              Button({ class: 'btn btn-ghost btn-circle' }, '💾')
            ]),
            Tooltip({ tip: 'Edit item' }, [
              Button({ class: 'btn btn-ghost btn-circle' }, '✏️')
            ]),
            Tooltip({ tip: 'Delete permanently' }, [
              Button({ class: 'btn btn-ghost btn-circle text-error' }, '🗑️')
            ]),
            Tooltip({ tip: 'Settings' }, [
              Button({ class: 'btn btn-ghost btn-circle' }, '⚙️')
            ])
          ]);
        };
        Mount(IconsDemo, iconsTarget);
      }

      // 4. Form Field Tooltips
      const formTarget = document.querySelector('#demo-form');
      if (formTarget && !formTarget.hasChildNodes()) {
        const FormDemo = () => {
          const username = $('');
          const email = $('');
          
          return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
            Div({ class: 'flex items-center gap-2' }, [
              Input({
                label: 'Username',
                value: username,
                placeholder: 'Choose a username',
                oninput: (e) => username(e.target.value)
              }),
              Tooltip({ tip: 'Must be at least 3 characters, letters and numbers only' }, [
                Span({ class: 'cursor-help text-info' }, '?')
              ])
            ]),
            Div({ class: 'flex items-center gap-2' }, [
              Input({
                label: 'Email',
                type: 'email',
                value: email,
                placeholder: 'Enter your email',
                oninput: (e) => email(e.target.value)
              }),
              Tooltip({ tip: 'We\'ll never share your email with anyone' }, [
                Span({ class: 'cursor-help text-info' }, '?')
              ])
            ])
          ]);
        };
        Mount(FormDemo, formTarget);
      }

      // 5. Interactive Tooltip
      const interactiveTarget = document.querySelector('#demo-interactive');
      if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
        const InteractiveDemo = () => {
          const showTip = $(false);
          const tooltipText = $('Hover over the button!');
          
          const updateTooltip = (text) => {
            tooltipText(text);
            setTimeout(() => {
              tooltipText('Hover over the button!');
            }, 2000);
          };
          
          return Div({ class: 'flex flex-col gap-4 items-center' }, [
            Tooltip({ tip: () => tooltipText() }, [
              Button({ 
                class: 'btn btn-primary btn-lg',
                onclick: () => Toast('Button clicked!', 'alert-info', 2000)
              }, 'Interactive Button')
            ]),
            Div({ class: 'flex gap-2 flex-wrap justify-center mt-4' }, [
              Button({ 
                class: 'btn btn-xs',
                onclick: () => updateTooltip('You clicked the button!')
              }, 'Change Tooltip'),
              Button({ 
                class: 'btn btn-xs',
                onclick: () => updateTooltip('Try hovering now!')
              }, 'Change Again')
            ])
          ]);
        };
        Mount(InteractiveDemo, interactiveTarget);
      }

      // 6. Rich Tooltip Content
      const richTarget = document.querySelector('#demo-rich');
      if (richTarget && !richTarget.hasChildNodes()) {
        const RichDemo = () => {
          return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
            Tooltip({ 
              tip: Div({ class: 'text-left p-1' }, [
                Div({ class: 'font-bold' }, 'User Info'),
                Div({ class: 'text-xs' }, 'John Doe'),
                Div({ class: 'text-xs' }, 'john@example.com'),
                Div({ class: 'badge badge-xs badge-primary mt-1' }, 'Admin')
              ])
            }, [
              Button({ class: 'btn btn-outline' }, 'User Profile')
            ]),
            Tooltip({ 
              tip: Div({ class: 'text-left p-1' }, [
                Div({ class: 'font-bold flex items-center gap-1' }, [
                  Icons.iconWarning,
                  Span({}, 'System Status')
                ]),
                Div({ class: 'text-xs' }, 'All systems operational'),
                Div({ class: 'text-xs text-success' }, '✓ 99.9% uptime')
              ])
            }, [
              Button({ class: 'btn btn-outline' }, 'System Status')
            ])
          ]);
        };
        Mount(RichDemo, richTarget);
      }

      // 7. Color Variants
      const colorsTarget = document.querySelector('#demo-colors');
      if (colorsTarget && !colorsTarget.hasChildNodes()) {
        const ColorsDemo = () => {
          return Div({ class: 'flex flex-wrap gap-4 justify-center' }, [
            Tooltip({ tip: 'Primary tooltip', class: 'tooltip-primary' }, [
              Button({ class: 'btn btn-primary btn-sm' }, 'Primary')
            ]),
            Tooltip({ tip: 'Secondary tooltip', class: 'tooltip-secondary' }, [
              Button({ class: 'btn btn-secondary btn-sm' }, 'Secondary')
            ]),
            Tooltip({ tip: 'Accent tooltip', class: 'tooltip-accent' }, [
              Button({ class: 'btn btn-accent btn-sm' }, 'Accent')
            ]),
            Tooltip({ tip: 'Info tooltip', class: 'tooltip-info' }, [
              Button({ class: 'btn btn-info btn-sm' }, 'Info')
            ]),
            Tooltip({ tip: 'Success tooltip', class: 'tooltip-success' }, [
              Button({ class: 'btn btn-success btn-sm' }, 'Success')
            ]),
            Tooltip({ tip: 'Warning tooltip', class: 'tooltip-warning' }, [
              Button({ class: 'btn btn-warning btn-sm' }, 'Warning')
            ]),
            Tooltip({ tip: 'Error tooltip', class: 'tooltip-error' }, [
              Button({ class: 'btn btn-error btn-sm' }, 'Error')
            ])
          ]);
        };
        Mount(ColorsDemo, colorsTarget);
      }

      // 8. All Tooltip Positions
      const allPositionsTarget = document.querySelector('#demo-all-positions');
      if (allPositionsTarget && !allPositionsTarget.hasChildNodes()) {
        const AllPositionsDemo = () => {
          return Div({ class: 'grid grid-cols-3 gap-4 justify-items-center' }, [
            Div({ class: 'col-start-2' }, [
              Tooltip({ tip: 'Top tooltip', class: 'tooltip-top' }, [
                Button({ class: 'btn btn-sm w-24' }, 'Top')
              ])
            ]),
            Div({ class: 'col-start-1 row-start-2' }, [
              Tooltip({ tip: 'Left tooltip', class: 'tooltip-left' }, [
                Button({ class: 'btn btn-sm w-24' }, 'Left')
              ])
            ]),
            Div({ class: 'col-start-2 row-start-2' }, [
              Tooltip({ tip: 'Center tooltip', class: 'tooltip' }, [
                Button({ class: 'btn btn-sm w-24' }, 'Center')
              ])
            ]),
            Div({ class: 'col-start-3 row-start-2' }, [
              Tooltip({ tip: 'Right tooltip', class: 'tooltip-right' }, [
                Button({ class: 'btn btn-sm w-24' }, 'Right')
              ])
            ]),
            Div({ class: 'col-start-2 row-start-3' }, [
              Tooltip({ tip: 'Bottom tooltip', class: 'tooltip-bottom' }, [
                Button({ class: 'btn btn-sm w-24' }, 'Bottom')
              ])
            ])
          ]);
        };
        Mount(AllPositionsDemo, allPositionsTarget);
      }
    };

    initTooltipExamples();
    
    if (window.$docsify) {
      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
        hook.doneEach(initTooltipExamples);
      });
    }
  })();
</script>