import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Components/Popover/Feature Flag" name="Flag details" />

# Dynamically set floating styles

Components with `autoAlign` use the
[`floating-ui`](https://github.com/floating-ui/floating-ui) library to handle
the dynamic positioning of floating elements relative to their trigger / anchor
element. This also includes collision detection that repositions the floating
element as necessary to keep it visible within the viewport. In the majority of
cases, the styling from the `floating-ui` 'fixed' positioning strategy prevents
the floating element from being
[clipped](https://floating-ui.com/docs/misc#clipping) by an ancestor element.

The `enable-v12-dynamic-floating-styles` flag enables this dynamic styling
without the collision detection.

**Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
includes both the dynamic positioning styles and collision detection.

To use `autoAlign` your project needs to be using React v17+, see
https://github.com/carbon-design-system/carbon/issues/18714.

## Enable dynamic setting of floating styles

```js
<FeatureFlags enableV12DynamicFloatingStyles>
  <Popover open={open}>
    <button
      type="button"
      onClick={() => {
        setOpen(!open);
      }}>
      Toggle
    </button>
    <PopoverContent>
      The content that is revealed by interacting with the Toggle button
    </PopoverContent>
  </Popover>
</FeatureFlags>
```
