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);

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