JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {
                packages: ["corechart"]
            });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Data1', 'Data2', 'Data3', 'Data4', 'Data5', 'Data6', 'Data7', 'Data8'],
                    ['This is Data1', 7500, 2757, 'This is Data 4', 4, 'This is Data 6', 'This is Data 8', 330], ]);

                var options = {
                    title: 'Test Title',
                    hAxis: {
                        title: 'Test hAxis'
                    },
                    vAxis: {
                        title: 'Test vAxis'
                    },
                    bubble: {
                        textStyle: {
                            fontSize: 11
                        }
                    }
                };

                var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
                chart.draw(data, options);



                var mouseX;
                var mouseY;
                $(document).mousemove(function(e) {
                    mouseX = e.pageX;
                    mouseY = e.pageY;
                });




                function handler1(e) {
                    var x = mouseX;
                    var y = mouseY - 130;
                    var a = 1;
                    var b = 2;
                    $('#custom_tooltip').html('<div>Value of A is' + a + ' and value of B is' + b + '</div>').css({
                        'top': y,
                        'left': x
                    }).fadeIn('slow');
                }

                function handler2(e) {
                    $('#custom_tooltip').fadeOut('fast');
                }

               ...