React Components

# Tooltip

## Overview

---

## Anatomy

---

Tooltip

TooltipContent

TooltipTrigger

---

## Tooltip

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| 
closeDelay

 | `number` | - | `undefined` | Number of milliseconds before closing the tooltip. |
| 

onOpenChange

 | `(detail: TooltipOpenChangeDetail) => void` | - | `undefined` | Callback fired when the tooltip open state changes. |
| 

open

 | `boolean` | - | `undefined` | The controlled open state of the tooltip. |
| 

openDelay

 | `number` | - | `undefined` | Number of milliseconds before opening the tooltip. |
| 

overlayConfig

 | `object` | - | `undefined` | The overlay configuration. |
| 

flip

 | `boolean` | - | `-` | Whether to flip the position. |
| 

gutter

 | `number` | - | `-` | The main axis offset or gap between the reference and floating elements. |
| 

position

 | `TOOLTIP_POSITION` | - | `-` | The tooltip position around the trigger. |
| 

sameWidth

 | `boolean` | - | `-` | Whether to make the floating element same width as the reference element. |
| 

positionDeprecated

 | `TOOLTIP_POSITION` | - | `undefined` | The tooltip position around the trigger. |
| 

positionerStyle

 | `CSSProperties` | - | `undefined` | Custom style applied to the overlay positioner. Useful if you want to override the overlay z-index. |

## TooltipContent

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [div attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div#attributes) . |
| 
createPortal

 | `boolean` | - | `true` | Whether the component should be rendered in the DOM close to the body tag. |
| 

withArrow

 | `boolean` | - | `false` | Whether the component displays an arrow pointing to the trigger. |

## TooltipTrigger

---

| Property | Type | Required | Default value | Description |
| --- | --- | --- | --- | --- |
| This component extends all the native [button attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#attributes) . |
| 
asChild

 | `boolean` | - | `undefined` | Use the provided child element as the default rendered element, combining their props and behavior. Be careful to pass an actual Node, not a Fragment. |

## Enums

---

### TOOLTIP_POSITION

-   bottom =`"bottom"`
-   bottomEnd =`"bottom-end"`
-   bottomStart =`"bottom-start"`
-   left =`"left"`
-   leftEnd =`"left-end"`
-   leftStart =`"left-start"`
-   right =`"right"`
-   rightEnd =`"right-end"`
-   rightStart =`"right-start"`
-   top =`"top"`
-   topEnd =`"top-end"`
-   topStart =`"top-start"`

## Interfaces

---

### TooltipOpenChangeDetail

-   `open: boolean`

## Examples

---

### Default

```jsx
{
  globals: {
    imports: `import { Tooltip, TooltipContent, TooltipTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Tooltip>
      <TooltipTrigger>
        Show tooltip      </TooltipTrigger>
      <TooltipContent>
        This is the tooltip content      </TooltipContent>
    </Tooltip>
}
```

### Custom Trigger

```jsx
{
  globals: {
    imports: `import { ICON_NAME, Icon, Tooltip, TooltipContent, TooltipTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <Tooltip>
      <TooltipTrigger asChild>
        <Icon name={ICON_NAME.circleQuestion} style={{
        fontSize: '24px'
      }} />
      </TooltipTrigger>
      <TooltipContent>
        This is the tooltip content      </TooltipContent>
    </Tooltip>
}
```

### Controlled

```jsx
const [isOpen, setIsOpen] = useState(false);
  function toggleTooltip() {
    setIsOpen(isOpen => !isOpen);
  }
  return <>
      <Button onClick={toggleTooltip}>
        Toggle tooltip      </Button>
      <Tooltip open={isOpen}>
        <TooltipTrigger asChild>
          <Icon name={ICON_NAME.circleQuestion} style={{
          fontSize: '24px'
        }} />
        </TooltipTrigger>
        <TooltipContent withArrow>
          This is the tooltip content        </TooltipContent>
      </Tooltip>
    </>;
}
```

### Grid

```jsx
{
  decorators: [story => <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
    gridTemplateRows: 'repeat(3, 1fr)',
    gap: '20px',
    padding: '50px 150px'
  }}>
      {story()}
    </div>],
  globals: {
    imports: `import { Tooltip, TooltipContent, TooltipTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <Tooltip overlayConfig={{
      position: 'top-start'
    }}>
        <TooltipTrigger>
          Top Left        </TooltipTrigger>
        <TooltipContent withArrow>
          Top Left tooltip        </TooltipContent>
      </Tooltip>
      <Tooltip overlayConfig={{
      position: 'top'
    }}>
        <TooltipTrigger>
          Top        </TooltipTrigger>
        <TooltipContent withArrow>
          Top tooltip        </TooltipContent>
      </Tooltip>
      <Tooltip overlayConfig={{
      position: 'top-end'
    }}>
        <TooltipTrigger>
          Top Right        </TooltipTrigger>
        <TooltipContent withArrow>
          Top Right tooltip        </TooltipContent>
      </Tooltip>
      <Tooltip overlayConfig={{
      position: 'left'
    }}>
        <TooltipTrigger>
          Middle Left        </TooltipTrigger>
        <TooltipContent withArrow>
          Middle Left tooltip        </TooltipContent>
      </Tooltip>
      <div />
      <Tooltip overlayConfig={{
      position: 'right'
    }}>
        <TooltipTrigger>
          Middle Right        </TooltipTrigger>
        <TooltipContent withArrow>
          Middle Right tooltip        </TooltipContent>
      </Tooltip>
      <Tooltip overlayConfig={{
      position: 'bottom-start'
    }}>
        <TooltipTrigger>
          Bottom Left        </TooltipTrigger>
        <TooltipContent withArrow>
          Bottom Left tooltip        </TooltipContent>
      </Tooltip>
      <Tooltip overlayConfig={{
      position: 'bottom'
    }}>
        <TooltipTrigger>
          Bottom        </TooltipTrigger>
        <TooltipContent withArrow>
          Bottom tooltip        </TooltipContent>
      </Tooltip>
      <Tooltip overlayConfig={{
      position: 'bottom-end'
    }}>
        <TooltipTrigger>
          Bottom Right        </TooltipTrigger>
        <TooltipContent withArrow>
          Bottom Right tooltip        </TooltipContent>
      </Tooltip>
    </>
}
```

### Z index

```jsx
{
  globals: {
    imports: `import { ICON_NAME, Icon, TOOLTIP_POSITION, Tooltip, TooltipContent, TooltipTrigger } from '@ovhcloud/ods-react';`
  },
  tags: ['!dev'],
  render: ({}) => <>
      <span>Default Z-axis order:</span>
      <Tooltip open>
        <TooltipTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </TooltipTrigger>
        <TooltipContent withArrow>
          Back        </TooltipContent>
      </Tooltip>
      <Tooltip open>
        <TooltipTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </TooltipTrigger>
        <TooltipContent withArrow>
          Front        </TooltipContent>
      </Tooltip>
      <br />
      <span>Custom Z-axis order:</span>
      <Tooltip open overlayConfig={{
      position: TOOLTIP_POSITION.bottom
    }} positionerStyle={{
      zIndex: 'calc(var(--ods-theme-overlay-z-index) + 1)'
    }}>
        <TooltipTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </TooltipTrigger>
        <TooltipContent withArrow>
          Front        </TooltipContent>
      </Tooltip>
      <Tooltip open overlayConfig={{
      position: TOOLTIP_POSITION.bottom
    }}>
        <TooltipTrigger asChild>
          <Icon name={ICON_NAME.circleInfo} style={{
          fontSize: '24px'
        }} />
        </TooltipTrigger>
        <TooltipContent withArrow>
          Back        </TooltipContent>
      </Tooltip>
    </>
}
```

## Recipes

---

Dashboard Card

#### Cluster Information

---

Name

MyCluster

---

ID

---

Region

GRA91-AZ

---

Admission plugins

Always Pull Images PluginEnable

Plugin Node RestrictionEnable

---

Feature List

-   Memory: up to 1.5 TB
    
-   SLA: 99.99%
    
-   Guaranteed public bandwidth from 5 Gbps to 25 Gbps
    
-   25 Gbps private bandwidth included
    
-   OVHcloud Link Aggregation
    

Feature List Product Card

WEB HOSTING

NewBest seller

Performance

For demanding online stores and projects.

1 vCore 2,4 GHz, 2 Go RAM1 vCore 2,4 GHz, 4 Go RAM2 vCores 2,4 GHz, 8 Go RAM

From

€24.46ex. VAT/month

or €13.19 incl. VAT/monthfor a 24-month registration

Minimum 2-year registration €100 free with a 5-year registration

Installation fee:Free

-   -   Unlimited websites
        
    -   High power level
        
    -   1 domain name free for the first
        
    -   500 GB SSD storage
        
    -   1,000 email addresses
        
-   1-click CMS
    
    -   WordPress
        
    -   Joomla!
        
    -   Drupal
        
    -   Prestashop
        
-   Database
    
    -   4 x 1 GB databases
        
    -   8 GB Web Cloud Databases
        
-   Security
    
    -   Unlimited free SSL
        
    -   Anti-DDoS protection
        
    -   Anti-virus and anti-spam
        
    -   Daily backups
        
-   Performance
    
    -   99.9% observed availability
        
    -   Guaranteed resources
        
    -   Unlimited traffic
        
    -   Service continuity
        
    -   Boost option to withstand temporary traffic spikes
        
-   Support and additional services
    
    -   Git
        
    -   Standard support
        
    -   SSH access
        
    -   CDN Basic