## Feature Examples

### Full Example
- description: A full example with an action button and an image.
- example:
```jsx
() => {
  return (
    <Box height="150px" verticalAlign="middle" paddingRight="10px">
      <FloatingHelper
        initiallyOpened={false}
        target={<Text>Hover to show the floating helper</Text>}
        content={
          <FloatingHelper.Content
            title="Don’t forget to setup payments"
            body="In order to sell your music you need to choose a payment method."
            actionText="Ok, Take Me There"
            onActionClick={() => null}
            image={<Icons.Image width="102" height="102" viewBox="4 4 18 18" />}
          />
        }
        placement="right"
      />
    </Box>
  );
};
```

### Programmatic Open Example (Uncontrolled mode)
- description: In \`Uncontrolled\` mode, the default behavior is that the popover content is opened when mouse-enter is triggered on the target and closes when the close button is clicked. This option is not recommended but is still supported for backward compatibility.
- example:
```jsx
() => {
  const helperRef = React.useRef(null);

  return (
    <Box height="100px" verticalAlign="middle">
      <Button onClick={() => helperRef.current.open()}>Click to open</Button>
      <FloatingHelper
        ref={helperRef}
        initiallyOpened={false}
        target={<span />}
        content={
          <FloatingHelper.Content
            title="Don’t forget to setup payments"
            body="In order to sell your music you need to choose a payment method."
          />
        }
        placement="right"
      />
    </Box>
  );
};
```

### Controlled Example
- description: 
- example:
```jsx
() => {
  const [isHelperOpen, setOpenHelper] = React.useState(false);

  return (
    <Box height="100px" verticalAlign="middle">
      <Button onClick={() => setOpenHelper(!isHelperOpen)}>
        Click to {isHelperOpen ? 'Close' : 'Open'}
      </Button>
      <FloatingHelper
        opened={isHelperOpen}
        target={<span />}
        content={
          <FloatingHelper.Content
            title="Don’t forget to setup payments"
            body="In order to sell your music you need to choose a payment method."
          />
        }
        placement="right"
      />
    </Box>
  );
};
```

### Skins
- description: `<FloatingHelper/>` has two skins: \`dark\` (default) and \`light\`.
- example:
```jsx
() => {
  return (
    <Layout>
      <Cell>
        <Box height="150px" verticalAlign="middle">
          <FloatingHelper
            initiallyOpened={false}
            target={<Text>Hover to show the floating helper</Text>}
            content={
              <FloatingHelper.Content
                title="Don’t forget to setup payments"
                body="In order to sell your music you need to choose a payment method."
              />
            }
            placement="right"
          />
        </Box>
      </Cell>
      <Cell>
        <Box height="150px" verticalAlign="middle">
          <FloatingHelper
            skin="light"
            initiallyOpened={false}
            target={<Text>Hover to show the floating helper</Text>}
            content={
              <FloatingHelper.Content
                title="Don’t forget to setup payments"
                body="In order to sell your music you need to choose a payment method."
              />
            }
            placement="right"
          />
        </Box>
      </Cell>
    </Layout>
  );
};
```