YMapHint

A hint is a popup text that can display any HTML content.
The YMapHint class displays hints on map elements.

Note

This class is a JS API package component and provides additional features not included in the core API.

To integrate the package, follow the instructions.

Usage example

vanilla

react

vue

const {YMapHint, YMapHintContext} = await ymaps3.import('@yandex/ymaps3-hint@0.0.1');
map.addChild(defaultFeatures = new YMapDefaultFeaturesLayer());
map.addChild(hint = YMapHint({
   layers: [defaultFeatures.layer],
   hint: object =&gt; object?.properties?.hint
}));

const {YMapDefaultMarker} = await ymaps3.import('@yandex/ymaps3-default-ui-theme');
map.addChild(new YMapDefaultMarker({coordinates: [37, 55], properties: {hint: 'Hello world!'}}));

hint.addChild(new class MyHint extends ymaps3.YMapEntity {
   _onAttach() {
        this._element = document.createElement('div');
        this._element.className = 'my-hint';

        this._detachDom = ymaps3.useDomContext(this, this._element);
        this._watchContext(YMapHintContext, () =&gt; {
             this._element.textContent = this._consumeContext(YMapHintContext)?.hint;
        }, {immediate: true});
   }

   _onDetach() {
       this._detachDom();
       this._detachDom = undefined;
   }
});