# InfoBubble

*Category:* Components
*Section:* Map
*Source:* https://uikit.developers.rio.cloud/#/components/mapInfoBubble
*Captured:* 2026-04-27T14:59:03.235Z

## InfoBubble

### Example: Click the POI marker to open the InfoBubble.

Terms of use © 1987–2026 HERE

1 km

Choose view
Map view
Satellite

Traffic conditions
Show traffic incidents

Click the POI marker to open the InfoBubble.

#### React (tsx)

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

import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
import InfoBubble from '@rio-cloud/rio-uikit/InfoBubble';
import Map from '@rio-cloud/rio-uikit/Map';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import Marker from '@rio-cloud/rio-uikit/Marker';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import type { MapApi } from '@rio-cloud/rio-uikit/mapTypes';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';

const mapCenter = { lat: 48.1398, lng: 11.582 };
const poiPosition = { lat: 48.1274, lng: 11.593 };

const PoiInfoBubbleContent = () => (
    <div className='width-250 user-select-none'>
        <div className='margin--15 padding-20 rounded'>
            <div className='text-size-16 text-medium'>RIO Campus Munich</div>
            <div className='text-color-dark'>80939 Munich, Germany</div>

            <div className='margin-top-15 display-flex justify-content-between'>
                <div className='text-medium'>Open 24/7</div>
                <div className=''>
                    <span className='label label-success label-condensed'>Available</span>
                </div>
            </div>
            <div className='margin-top-10 text-color-darker line-height-20'>
                Visitor parking, reception and charging stations directly on site.
            </div>
        </div>
    </div>
);

export default () => {
    const [showInfoBubble, setShowInfoBubble] = useState(false);
    const mapApiRef = useRef<MapApi>();

    return (
        <>
            <Map
                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                center={mapCenter}
                zoom={13}
                height={420}
                mapSettings={
                    <MapSettings
                        options={[
                            <MapTypeSettings
                                key='mapTypeSettings'
                                tooltip='Change map type'
                                dropdownHeaderText='Map views'
                                defaultTypeLabel='Default view'
                                truckTypeLabel='Truck view'
                                terrainTypeLabel='Terrain view'
                                satelliteTypeLabel='Satellite view'
                                nightTypeLabel='Night view'
                            />,
                        ]}
                    />
                }
            >
                {(api: MapApi) => {
                    mapApiRef.current = api;

                    return (
                        <Marker
                            position={poiPosition}
                            icon={
                                <SingleMapMarker
                                    iconNames={['factory']}
                                    markerColor='bg-map-marker-poi'
                                    active={showInfoBubble}
                                />
                            }
                            eventListenerMap={{
                                [EventUtils.TAP]: () => setShowInfoBubble(true),
                            }}
                        />
                    );
                }}
            </Map>
            {showInfoBubble && (
                <InfoBubble
                    api={mapApiRef.current}
                    position={poiPosition}
                    markerOffset={{ x: 0, y: -50 }}
                    content={<PoiInfoBubbleContent />}
                    onClose={() => setShowInfoBubble(false)}
                />
            )}
            <div className='margin-top-15 text-color-dark'>Click the POI marker to open the InfoBubble.</div>
        </>
    );
};
```

### Example: Example 2

Terms of use © 1987–2026 HERE

10 km

Ansicht auswählen
Kartenansicht
Satellit

Verkehrslage
Verkehrsstörungen anzeigen

Toggle info

#### React (tsx)

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

import Map from '@rio-cloud/rio-uikit/Map';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import Button from '@rio-cloud/rio-uikit/Button';
import InfoBubble from '@rio-cloud/rio-uikit/InfoBubble';
import type { MapApi } from '@rio-cloud/rio-uikit/mapTypes';

const mapCenter = { lat: 48.1351, lng: 11.582 };
const position = { lat: 48.02, lng: 11.6 };

const InfoBubbleContent = () => (
    <div className='width-200 user-select-none'>
        <div className='margin-top--15 margin-left--15 margin-right--25 padding-15 bg-lightest rounded-top'>
            <div className='text-bold'>Public toilet</div>
            <div className='text-color-dark line-height-18 text-size-12 margin-top-5'>
                Toilet handle in public toilet is broken and can't flush the toilet
            </div>
        </div>
        <div className='margin-bottom--15 margin-left--15 margin-right--25 padding-15 shadow-default rounded-top'>
            <div className='line-height-20 text-size-12'>
                <div className='display-flex justify-content-between'>
                    <div className='text-color-dark'>Operator</div>
                    <div>Mr. Handyman</div>
                </div>
                <div className='display-flex justify-content-between'>
                    <div className='text-color-dark'>Contact</div>
                    <div>089 / 123 45 67 89</div>
                </div>
            </div>
            <div className='text-center text-size-12 margin-top-5 margin-bottom--5'>
                <a href='https://rio.cloud' target='_blank' rel='noreferrer'>
                    Visit website
                </a>
            </div>
        </div>
    </div>
);

export default () => {
    const [showInfo, setShowInfo] = useState(false);

    const mapApiRef = useRef<MapApi>();

    return (
        <>
            <Map
                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                center={mapCenter}
                zoom={10}
                height={400}
                language='de'
                mapSettings={
                    <MapSettings
                        options={[
                            <MapTypeSettings
                                key='mapTypeSettings'
                                tooltip='Change map type'
                                dropdownHeaderText='Map views'
                                defaultTypeLabel='Default view'
                                truckTypeLabel='Truck view'
                                terrainTypeLabel='Terrain view'
                                satelliteTypeLabel='Satellite view'
                                nightTypeLabel='Night view'
                            />,
                        ]}
                    />
                }
            >
                {(api: MapApi) => {
                    mapApiRef.current = api;

                    return null;
                }}
            </Map>
            {showInfo && (
                <InfoBubble
                    api={mapApiRef.current}
                    position={position}
                    content={<InfoBubbleContent />}
                    onClose={() => setShowInfo(false)}
                />
            )}
            <div className='margin-top-20'>
                <Button onClick={() => setShowInfo(!showInfo)}>Toggle info</Button>
            </div>
        </>
    );
};
```