Untitled

In PrimeReact, the `Tooltip` component provides a way to show informative messages when users hover over or focus on an element. Below is a list of props for configuring tooltips, along with an example.

### **Props for Tooltip in PrimeReact**

1. **target** (string | HTMLElement): Defines the target element(s) for which the tooltip is bound. You can use a CSS selector or a DOM element.
   
2. **content** (string | JSX): Specifies the content to display inside the tooltip.

3. **position** (string): Defines where the tooltip should be displayed relative to the target. Values can be:
   - `"right"`
   - `"left"`
   - `"top"`
   - `"bottom"`
   
   Default is `"right"`.

4. **event** (string): Specifies the event to trigger the tooltip. Values can be:
   - `"hover"`
   - `"focus"`
   - `"both"`

   Default is `"hover"`.

5. **showDelay** (number): Delay in milliseconds before showing the tooltip. Default is `0`.

6. **hideDelay** (number): Delay in milliseconds before hiding the tooltip. Default is `0`.

7. **autoZIndex** (boolean): Whether to automatically manage `z-index` to ensure visibility. Default is `true`.

8. **baseZIndex** (number): Base `z-index` for the tooltip. Default is `0`.

9. **showOnDisabled** (boolean): When enabled, tooltips will still be shown even if the target element is disabled. Default is `false`.

10. **positionStyle** (string): CSS position style for the tooltip. Default is `"absolute"`.

11. **className** (string): Additional CSS class for the tooltip to customize styles.

12. **style** (object): Inline styles for the tooltip.

13. **onShow** (function): Callback when the tooltip becomes visible.

14. **onHide** (function): Callback when the tooltip is hidden.

---

### **Usage Example**

```javascript
import React from 'react';
import { Tooltip } from 'primereact/tooltip';
import { Button } from 'primereact/button';

const TooltipExample = () => {
    return (
        <div>
            {/* Bind tooltip to the button element */}
            <Button id="myButton" label="Hover me" className="p-button-info" />
            
            {/* Tooltip bound to a button using the 'target' prop */}
            <Tooltip 
                target="#myButton" 
                content="This is a tooltip!" 
                position="right" 
                showDelay={500} 
                hideDelay={300} 
            />
        </div>
    );
};

export default TooltipExample;
```

### **Explanation**:
- The `Tooltip` is bound to the button with the `id="myButton"` using the `target` prop.
- The `content` prop specifies the message shown in the tooltip.
- The tooltip is displayed on the **right** of the button after a `500ms` delay when hovered and hides after `300ms`.

You can further customize the behavior using other props like `position`, `event`, and styling options.