Kendo Map marker tooltip stays under map

[Adil]

Hi all,

I have a map on in my window and when i open window i'm showing this map. I have also some markers with tooltip but these tooltips cannot shown on map when i inspect it i see they are under page and there is one item <kendo-popup> as i highlighted on attached image if i change element style i can see tooltip but i cannot reach that element with id or class . 

How can i fix this ? Please help...  

And also 

{{ dataItem.name }} 

returns empty too...

Here my code

html

<div #mapContainer>   
<kendo-map  [center]="center" [zoom]="6">
    <kendo-map-layers>
      <kendo-map-tile-layer
        [subdomains]="tileSubdomains"
        [urlTemplate]="tileUrl"
        attribution="&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>"
      >
      </kendo-map-tile-layer>
      <kendo-map-marker-layer [data]="markers" locationField="latlng" titleField="title">
        <kendo-map-marker-layer-tooltip>
            <ng-template kendoMapMarkerTooltipTemplate let-location="location" let-dataItem="dataItem">
                {{ dataItem.name }} ({{ location }})
            </ng-template>
        </kendo-map-marker-layer-tooltip>
      </kendo-map-marker-layer>
    </kendo-map-layers>
  </kendo-map>
</div>

ts side

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { TileUrlTemplateArgs } from '@progress/kendo-angular-map';

@Component({
  selector: 'app-map-station',
  templateUrl: './map-station.component.html',
  styleUrls: ['./map-station.component.scss']
})
export class MapStationComponent {

  @ViewChild('mapContainer') mapContainer!: ElementRef;

  constructor(private renderer: Renderer2) { }

//Here i tried to add zindex via ciode but cannot achieve too...
  ngAfterViewChecked() {
    if (this.mapContainer && this.mapContainer.nativeElement) {
      const popupElement = this.mapContainer.nativeElement.querySelector('.k-popup');
      if (popupElement) {
        this.renderer.setStyle(popupElement, 'z-index', '99999 !important');
      }
    }
  }

  tileSubdomains = ["a", "b", "c"];
  tileUrl = (e: TileUrlTemplateArgs): string => `https://${e.subdomain}.tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`;
  center = [39.8712, 32.7562];

  markers = [
    { latlng: [41.0851, 28.9768], title: "Test1" },
    { latlng: [41.0880, 27.9768], title: "Test2" },
    { latlng: [40.0851, 28.9768], title: "Test3" },
    { latlng: [40.0851, 27.9768], title: "Test4" },
  ];
}