JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div style="position:absolute">
    <div id="map">my map</div>
    <div id="tooltip" title="this is the tooltip"></div>
</div>

CSS

#map {
    width:500px;
    height:500px;
}
#tooltip {
    position: absolute;
}

JavaScript

var map;				// the google map
var overlay;			// google maps overlay
var markers = {};       // create markers object

map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 15
});

overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

/* add sample markers */
addMarker(1, "Marker1", 53.992120, -1.541812);
addMarker(2, "Marker2", 53.993565, -1.538245);

/* add marker to map */
function addMarker(id, name, lat, lng) {
    /* add new marker */
    var marker = new google.maps.Marker({
        position: {lat: lat, lng: lng},
        map: map,
        title: name,
        id: id,
        latitude: lat,
        longitude: lng
    });
    markers[id] = marker;
    
    /* pan to marker */
    map.panTo(marker.position);

    marker.addListener('mouseover', function () {
        
        var tooltip = $('#tooltip');
        
        
        /* get marker pixel position */
        var proj = overlay.getProjection();
        var pos = marker.getPosition();
        var p = proj.fromLatLngToContainerPixel(pos);
    
        /* show tooltip */
        tooltip.remove();
        
        tooltip = $(' <div id="tooltip" title="'+ marker.title+'"></div>');
        tooltip.css({"left": p.x + "px", "top": (p.y + 10) + "px"});
        $('#map').after(tooltip);
        tooltip.tooltip();
        tooltip.tooltip('show');
                     
    });
     markers[id].addListener('mouseout', function () {
        $("#tooltip").tooltip('hide');
    });
}