# Popover

*Category:* Components
*Section:* Misc
*Source:* https://uikit.developers.rio.cloud/#/components/popover
*Captured:* 2026-04-27T14:58:25.392Z

In order to use a Popover on an element, wrap it with the OverlayTrigger component.

## Popover

For positioning Popovers and Tooltips we use Popper.js that is integrated into the OverlayTrigger. For controlling the position or behavior use the popperConfig attribute.

### Example: Example 1

Popover on top
Popover on right
Popover on bottom
Popover on left

#### React (tsx)

```tsx
import Popover from '@rio-cloud/rio-uikit/Popover';
import OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';

const placements = ['top', 'right', 'bottom', 'left'] as const;

export default () => (
    <div className='display-flex flex-wrap'>
        {placements.map(placement => (
            <OverlayTrigger
                trigger='click'
                key={placement}
                placement={placement}
                overlay={
                    <Popover id={`popover-positioned-${placement}`} title='Demo'>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                    </Popover>
                }
            >
                {/* Surrounding div is required for proper positioning of the Popover as the button uses a margin */}
                <div>
                    <button className='btn btn-default margin-10' type='button'>
                        Popover on {placement}
                    </button>
                </div>
            </OverlayTrigger>
        ))}
    </div>
);
```

#### HTML (html)

```html
<div class="display-flex flex-wrap">
    <div>
        <button class="btn btn-default margin-10" type="button">Popover on top</button>
    </div>
    <div>
        <button class="btn btn-default margin-10" type="button">Popover on right</button>
    </div>
    <div>
        <button class="btn btn-default margin-10" type="button">Popover on bottom</button>
    </div>
    <div>
        <button class="btn btn-default margin-10" type="button">Popover on left</button>
    </div>
</div>
```

#### Props (json)

```json
popperConfig={{
    modifiers: [
         {
             name: 'offset',
             options: {
                 offset: [0, 5],
             },
         },
         {
             name: 'arrow',
             options: {},
         },
     ],
 }}
```

## Extended example

### Example: Example 2

Click Me

#### React (tsx)

```tsx
import { useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import Popover from '@rio-cloud/rio-uikit/Popover';
import OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';

const content = (
    <ul className='list-group margin-0 width-300'>
        <li className='list-group-item padding-x-20 border-none'>Cras justo odio</li>
        <li className='list-group-item padding-x-20 border-top-only border-color-lighter'>
            <span>Dapibus ac facilisis in</span>
            <span className='label label-info margin-left-25'>Some info</span>
        </li>
        <li className='list-group-item padding-x-20 border-top-only border-color-lighter'>Morbi leo risus</li>
        <li className='list-group-item padding-x-20 border-top-only border-color-lighter rounded-bottom'>
            Porta ac consectetur ac
        </li>
    </ul>
);

export default () => {
    const [showPopover, setShowPopover] = useState(false);

    return (
        <div className='padding-25 bg-lightest'>
            <OverlayTrigger
                show={showPopover}
                onToggle={setShowPopover}
                trigger='click'
                placement='right'
                overlay={
                    <Popover
                        id='popover-extended-sample'
                        titleClassName='bg-lightest rounded-top'
                        contentClassName='padding-0'
                    >
                        <Popover.Title className='rounded-top padding-x-20'>
                            <div>
                                <div className='h5 text-medium margin-bottom-0'>Lorem ipsum dolor</div>
                                <div className='margin-bottom-20 text-color-dark'>13.04.2021 15:00 - 16:00</div>
                                <div className='btn-toolbar display-grid grid-cols-2 margin-bottom-15'>
                                    <Button>Do nothing</Button>
                                    <Button bsStyle='primary' onClick={() => setShowPopover(false)}>
                                        Close
                                    </Button>
                                </div>
                            </div>
                        </Popover.Title>
                        <Popover.Content className='padding-0'>{content}</Popover.Content>
                    </Popover>
                }
                popperConfig={{
                    modifiers: [
                        { name: 'offset', options: { offset: [50, 15] } },

                        // 5px from the edges of the popper due to rounded corners for the popover
                        { name: 'arrow', options: { padding: 5 } },
                    ],
                }}
            >
                <Button bsStyle='info' bsSize='lg' variant='outline'>
                    Click Me
                </Button>
            </OverlayTrigger>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="padding-25 bg-lightest">
    <button type="button" class="btn btn-info btn-outline btn-lg btn-component" tabindex="0">Click Me</button>
</div>
```

#### Props (json)

```json
popperConfig={{
    modifiers: [
         {
             name: 'offset',
             options: {
                 offset: [0, 5],
             },
         },
         {
             name: 'arrow',
             options: {},
         },
     ],
 }}
```