Balloon and hint

Open in CodeSandbox

On the map you can display the balloon and hint.

Links to the balloon and hint managers are contained in the balloon and hint fields of the map object. The managers are implemented as the map.Balloon and map.Hint classes, but don't create instances of these classes yourself — use the corresponding fields of the map object.

The geo objects and other entities on the map have access to the balloon and hint. Use the corresponding properties and options (the balloon and hint) prefixes) to describe the balloon and hint of a geo object/hotspot. The coordinates of the balloon and the hint will be calculated automatically. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Balloon and hint</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            type="text/javascript"
        ></script>
        <script src="balloon_and_hint.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
            "map",
            {
                center: [54.83, 37.11],
                zoom: 5,
            },
            {
                searchControlProvider: "yandex#search",
            }
        ),
        myPlacemark = new ymaps.Placemark([55.907228, 31.260503], {
            // In order for the balloon and hint to open on the placemark, you need to set certain properties.
            balloonContentHeader: "The placemark balloon",
            balloonContentBody: "Content of the <em>placemark</em> balloon",
            balloonContentFooter: "Basement",
            hintContent: "The placemark hint",
        });

    myMap.geoObjects.add(myPlacemark);

    // Opening the balloon on the map (without binding to the geo object).
    myMap.balloon.open([51.85, 38.37], "Balloon content", {
        // Option: do not show the close button.
        closeButton: false,
    });

    // Showing the hint on the map (without binding to the geo object).
    myMap.hint.open(myMap.getCenter(), "Lone hint without a placemark", {
        // Option: delay before opening.
        openTimeout: 1500,
    });
}