# Tooltips

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

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

## Tooltips

> Note

By default Tooltips are not rendered on touch devices. This might lead to issues for test environments where the check for mobile evaluate to true simply because the required class name is not set on the document element.

To fix that, simply set the class in your test as follows:document.documentElement.classList.add('ua-desktop');

### Example: Example 1

Hover Hover Hover
Hover Hover
Hover Hover Hover

Click Click Click
Click Click
Click Click Click

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import Tooltip from '@rio-cloud/rio-uikit/Tooltip';
import OverlayTrigger from '@rio-cloud/rio-uikit/OverlayTrigger';
import type { Placement } from '@rio-cloud/rio-uikit/values/Placement';

import { getNames } from '../../../utils/mapUtils';

const tip = <span>Tooltip</span>;

const tooltipPlacements = {
    top: [
        {
            name: 'top-start',
        },
        {
            name: 'top',
        },
        {
            name: 'top-end',
        },
    ],
    middle: [
        {
            name: 'left',
        },
        {
            name: 'right',
        },
    ],
    bottom: [
        {
            name: 'bottom-start',
        },
        {
            name: 'bottom',
        },
        {
            name: 'bottom-end',
        },
    ],
};

const eachPlacementTop = getNames(tooltipPlacements.top);
const eachPlacementMiddle = getNames(tooltipPlacements.middle);
const eachPlacementBottom = getNames(tooltipPlacements.bottom);

export default () => (
    <>
        <div className='display-grid grid-cols-1 grid-cols-2-sm gap-20'>
            <div className='padding-15'>
                <div className='display-flex justify-content-between gap-10 center-block height-50'>
                    {eachPlacementTop.map((placement: Placement) => (
                        <OverlayTrigger
                            key={crypto.randomUUID()}
                            placement={placement}
                            overlay={
                                <Tooltip id='tooltip' allowOnTouch>
                                    {tip}
                                </Tooltip>
                            }
                        >
                            <Button bsStyle='primary'>Hover</Button>
                        </OverlayTrigger>
                    ))}
                </div>
                <div className='display-flex justify-content-between gap-10 center-block height-50'>
                    {eachPlacementMiddle.map((placement: Placement) => (
                        <OverlayTrigger
                            key={crypto.randomUUID()}
                            placement={placement}
                            overlay={
                                <Tooltip id='tooltip' allowOnTouch>
                                    {tip}
                                </Tooltip>
                            }
                        >
                            <Button bsStyle='primary'>Hover</Button>
                        </OverlayTrigger>
                    ))}
                </div>
                <div className='display-flex justify-content-between gap-10 center-block height-50'>
                    {eachPlacementBottom.map((placement: Placement) => (
                        <OverlayTrigger
                            key={crypto.randomUUID()}
                            placement={placement}
                            overlay={
                                <Tooltip id='tooltip' allowOnTouch>
                                    {tip}
                                </Tooltip>
                            }
                        >
                            <Button bsStyle='primary'>Hover</Button>
                        </OverlayTrigger>
                    ))}
                </div>
            </div>
            <div className='padding-15'>
                <div className='display-flex justify-content-between gap-10 center-block height-50'>
                    {eachPlacementTop.map((placement: Placement) => (
                        <OverlayTrigger
                            key={crypto.randomUUID()}
                            placement={placement}
                            trigger='click'
                            overlay={
                                <Tooltip id='tooltip' allowOnTouch>
                                    {tip}
                                </Tooltip>
                            }
                        >
                            <Button bsStyle='primary'>Click</Button>
                        </OverlayTrigger>
                    ))}
                </div>
                <div className='display-flex justify-content-between gap-10 center-block height-50'>
                    {eachPlacementMiddle.map((placement: Placement) => (
                        <OverlayTrigger
                            key={crypto.randomUUID()}
                            placement={placement}
                            trigger='click'
                            overlay={
                                <Tooltip id='tooltip' allowOnTouch>
                                    {tip}
                                </Tooltip>
                            }
                        >
                            <Button bsStyle='primary'>Click</Button>
                        </OverlayTrigger>
                    ))}
                </div>
                <div className='display-flex justify-content-between gap-10 center-block height-50'>
                    {eachPlacementBottom.map((placement: Placement) => (
                        <OverlayTrigger
                            key={crypto.randomUUID()}
                            placement={placement}
                            trigger='click'
                            overlay={
                                <Tooltip id='tooltip' allowOnTouch>
                                    {tip}
                                </Tooltip>
                            }
                        >
                            <Button bsStyle='primary'>Click</Button>
                        </OverlayTrigger>
                    ))}
                </div>
            </div>
        </div>
        <hr />
        <div className='display-grid grid-cols-2'>
            <div className='display-flex justify-content-between gap-10 center-block'>
                {eachPlacementTop.map((placement: Placement) => (
                    <OverlayTrigger
                        key={crypto.randomUUID()}
                        placement={placement}
                        delay={200}
                        overlay={
                            <Tooltip id='tooltip' allowOnTouch>
                                {tip}
                            </Tooltip>
                        }
                    >
                        <div
                            className='display-flex align-items-center justify-content-center'
                            data-test='info-overlay'
                        >
                            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />
                        </div>
                    </OverlayTrigger>
                ))}
            </div>
            <div className='display-flex justify-content-between gap-10 center-block'>
                {eachPlacementBottom.map((placement: Placement) => (
                    <OverlayTrigger
                        key={crypto.randomUUID()}
                        placement={placement}
                        delay={{ show: 1000, hide: 500 }}
                        overlay={
                            <Tooltip id='tooltip' allowOnTouch>
                                {tip}
                            </Tooltip>
                        }
                    >
                        <div
                            className='display-flex align-items-center justify-content-center'
                            data-test='info-overlay'
                        >
                            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />
                        </div>
                    </OverlayTrigger>
                ))}
            </div>
        </div>
    </>
);
```

#### HTML (html)

```html
<div class="display-grid grid-cols-1 grid-cols-2-sm gap-20">
    <div class="padding-15">
        <div class="display-flex justify-content-between gap-10 center-block height-50">
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
        </div>
        <div class="display-flex justify-content-between gap-10 center-block height-50">
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
        </div>
        <div class="display-flex justify-content-between gap-10 center-block height-50">
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Hover</button>
        </div>
    </div>
    <div class="padding-15">
        <div class="display-flex justify-content-between gap-10 center-block height-50">
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
        </div>
        <div class="display-flex justify-content-between gap-10 center-block height-50">
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
        </div>
        <div class="display-flex justify-content-between gap-10 center-block height-50">
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
            <button type="button" class="btn btn-primary btn-component" tabindex="0">Click</button>
        </div>
    </div>
</div>
<hr>
<div class="display-grid grid-cols-2">
    <div class="display-flex justify-content-between gap-10 center-block">
        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
            </span>
        </div>
        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
            </span>
        </div>
        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
            </span>
        </div>
    </div>
    <div class="display-flex justify-content-between gap-10 center-block">
        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
            </span>
        </div>
        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
            </span>
        </div>
        <div class="display-flex align-items-center justify-content-center" data-test="info-overlay">
            <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
            </span>
        </div>
    </div>
</div>
```

#### Props (json)

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

## SimpleTooltip

This component is for convenience and wraps the OverlayTrigger and the Tooltip itself.

### Example: Example 2

Simple tooltip with auto placement: Hover me Simple tooltip with bottom placement: Hover me

Hover me
Simple tooltip within text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum , rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

```tsx
import SimpleTooltip from '@rio-cloud/rio-uikit/SimpleTooltip';
import Button from '@rio-cloud/rio-uikit/Button';
import Tag from '@rio-cloud/rio-uikit/Tag';
import Switch from '@rio-cloud/rio-uikit/Switch';

const content = <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</span>;

export default () => (
    <div>
        <label>Simple tooltip with auto placement:</label>
        <div className='margin-bottom-25 display-flex gap-25'>
            <SimpleTooltip content={content}>
                <Button>Hover me</Button>
            </SimpleTooltip>
        </div>
        <label>Simple tooltip with bottom placement:</label>
        <div className='margin-bottom-25 display-flex gap-25'>
            <SimpleTooltip content={content} placement='bottom'>
                <Tag>Hover me</Tag>
            </SimpleTooltip>
            <SimpleTooltip content={content} placement='bottom'>
                <Switch>Hover me</Switch>
            </SimpleTooltip>
        </div>
        <label>Simple tooltip within text:</label>
        <div>
            Lorem ipsum dolor sit amet,{' '}
            <SimpleTooltip content={content} placement='top'>
                <a href='#'>consectetur adipiscing</a>
            </SimpleTooltip>{' '}
            elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc
            efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque
            tincidunt.{' '}
            <SimpleTooltip content={content} placement='top'>
                <a href='#'>Fusce ac ligula bibendum</a>
            </SimpleTooltip>
            , rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut
            hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci,
            semper finibus lorem in, fringilla pretium velit.
        </div>
        <hr />
        <SimpleTooltip placement='bottom-start' content={<span>Hello</span>} width={100}>
            <span className='rioglyph rioglyph-info-sign text-color-info text-size-18' />
        </SimpleTooltip>
    </div>
);
```

#### HTML (html)

```html
<div>
    <label>Simple tooltip with auto placement:</label>
    <div class="margin-bottom-25 display-flex gap-25">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Hover me</button>
    </div>
    <label>Simple tooltip with bottom placement:</label>
    <div class="margin-bottom-25 display-flex gap-25">
        <div class="tag">
            <div class="tag-inner">Hover me</div>
        </div>
        <div class="uikit-switch">
            <label class="switch-label uikit-switch label-position-right">
                <input type="checkbox" class="switch-input">
                <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                    <div class="switch-handle">
                    </div>
                </div>
                <div class="switch-text-wrapper user-select-none padding-top-1">Hover me</div>
            </label>
        </div>
    </div>
    <label>Simple tooltip within text:</label>
    <div>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. <a href="#">Fusce ac ligula bibendum</a>, rutrum libero quis, viverra sem. Interdum etmalesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
    <hr>
    <span class="rioglyph rioglyph-info-sign text-color-info text-size-18">
    </span>
</div>
```

#### Props (json)

```json
{
    show: 1_000,
    delay: 500,
}
```