Изменить стиль у хинта в яндекс картах

Question

Реализована схема магазина через яндекс карты. При наведении на магазин, всплывает хинт либо с картинкой логотипа, либо с названием. Мне нужно изменить стили этой самой подсказки (скруглить углы, указать шрифт и тд). Нигде в документации не нашла, в гугле тоже похожих вопросов не увидела.. Не могу обратиться к какому-то классу этой подсказки для css, потому что не могу отловить разметку в отладчике, она генерится только если мышка на метке находится.

Подскажите, может кто-нибудь сталкивался с подобным?

Посмотреть карту можно тут https://фестивальангарск.рф/skhema-trk/ смотрите только -1 этаж.

Код карты. С помощью функции print_content выводится содержимое хинта.

function print_content($id){
    global $ar_magazins;
    global $ar_magazins_spisok_names;

    return (isset($ar_magazins[$id])) ? "<img src='".$ar_magazins[$id]."'>" :((isset($ar_magazins_spisok_names[$id]))? $ar_magazins_spisok_names[$id]: "<div style='width: 155px;'><span class='empty-map'>Помещение свободно</span></div>");
}
ymaps.ready(function () {
var LAYER_NAME = 'user#layer',
        MAP_TYPE_NAME = 'user#customMap',
        TILES_PATH = '/assets/img/tiles/map0',

        MAX_ZOOM = 4,
        PIC_WIDTH = 2560,
        PIC_HEIGHT = 1792;

    var Layer = function () {
        var layer = new ymaps.Layer(TILES_PATH + '/%z/tile-%x-%y.png', {
        });
        layer.getZoomRange = function () {
            return ymaps.vow.resolve([0, 4]);
        };
        layer.getCopyrights = function () {
            return ymaps.vow.resolve('В©');
        };
        return layer;
    };
    ymaps.layer.storage.add(LAYER_NAME, Layer);

    var mapType = new ymaps.MapType(MAP_TYPE_NAME, [LAYER_NAME]);
    ymaps.mapType.storage.add(MAP_TYPE_NAME, mapType);

    var worldSize = Math.pow(2, MAX_ZOOM) * 256,

        map = new ymaps.Map('map0', {
            center: [0, 0],
            zoom: 1,
            controls: ['zoomControl'],
            type: MAP_TYPE_NAME
        },
            {
            projection: new ymaps.projection.Cartesian([[PIC_HEIGHT / 2 - worldSize, -PIC_WIDTH / 2], [PIC_HEIGHT / 2, worldSize - PIC_WIDTH / 2]], [false, false]),
            restrictMapArea: [[-PIC_HEIGHT / 2, -PIC_WIDTH / 2], [PIC_HEIGHT / 2, PIC_WIDTH / 2]] //ограничения области просмотра карты
        }
        );


	/*------------- point start --------------------------------------------*/
	MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; text-align: center!important; width: 100%; margin: auto;"></div>'
            // '<div style="color: #FFFFFF; text-align: center!important; width: 100%; margin: auto;">$[properties.iconContent]</div>'
        ),

	<? while(key($ar_pav) < 26){ ?>

	point = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [<?=$ar_pav[key($ar_pav)]?>]
            },
            properties: {
                iconContent: '<?=key($ar_pav)?>',
                hintContent: "<?=print_content(key($ar_pav))?>"
              	//balloonContentBody: "<?//=print_content(key($ar_pav))?>//",
            }
        }, {
            iconLayout: 'default#imageWithContent',
            iconImageHref: '/assets/img/-1.svg',
            iconImageSize: [27, 38],
            iconImageOffset: [-4, -24],
            iconContentOffset: [8, 8],
	        iconContentLayout: MyIconContentLayout
        });

	//собираем балуны и их айди, чтобы в поиске сработал клик
    balloons.push([<?=key($ar_pav)?>, point]);

    map.geoObjects.add(point);

    //наведение на балун
    point.events.add('mouseenter', function (e) {
        var target = e.get('target');
        target.options.set('iconImageHref', '/assets/img/-1hover.svg');
    });
    point.events.add('mouseleave', function (e) {
        var target = e.get('target');
        target.options.set('iconImageHref', '/assets/img/-1.svg');
    });

	<? next($ar_pav);
    }
    ?>
  });

П.С. Идея реализовать карту таким образом не моя, я только пытаюсь довести до ума..

Answer 1

в первой функции попробуй вручную вписать класс в img

Answer 2

В hintContent можно вставить HTML разметку. С уже прописанными стилями, сам hint изменить не получиться.

Answer 3

.ymaps-2-1-79-hint {
    padding: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 !important;
    border: 0 !important;
    max-width: 270px;
}
.ymaps-2-1-79-hint__text {
    padding: 8px 16px !important;
    background: #fff !important;
    font: inherit important;
    display: block;
    float: initial;
    color: #212121;
    font-size: 14px;
    line-height: 20px;
}

БЛОГ НА HUSL

Изменить стиль у хинта в яндекс картах

Ответы (3 шт):