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

<Meta title="Components/Toggletip/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>
  <ToggletipLabel>Toggletip label</ToggletipLabel>
  <Toggletip align={args.align} defaultOpen>
    <ToggletipButton label="Show information">
      <Information />
    </ToggletipButton>
    <ToggletipContent>
      <p>
        Scroll the container up, down, left or right to observe how the
        Toggletip will automatically change its position in attempt to stay
        within the viewport. This works on initial render in addition to on
        scroll.
      </p>
      <ToggletipActions>
        <Link href="#">Link action</Link>
        <Button size="sm">Button</Button>
      </ToggletipActions>
    </ToggletipContent>
  </Toggletip>
</FeatureFlags>
```
