I'm trying to make the tooltip only with the name of the country

As you can see, the tooltip has a white space beneath him. I'm using the following code.
google.charts.load('42', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Lat');
data.addColumn('number', 'Lon');
data.addColumn('string', 'Country');
data.addColumn('number', 'value');
data.addColumn({type:'string', role:'tooltip'});
var img_urls = {
'Colombia':"https://i.ibb.co/4PMF2Jh/MAPAS-CO.png",
'Argentina':"https://i.ibb.co/dtYqm6Q/MAPAS-AR.png",
'Lesotho':"https://i.ibb.co/yF2w9FS/MAPAS-LS.png",
'Eswatini':"https://i.ibb.co/0m0hKrm/MAPAS-ESWATINI-06.png",
'Uganda':"https://i.ibb.co/k67BkDz/MAPAS-UG.png",
'Botswana':"https://i.ibb.co/qmg2cw3/MAPAS-BW.png",
'Angola':"https://i.ibb.co/LPtm8VJ/MAPAS-AO.png",
'Romania':"https://i.ibb.co/hH29SnL/MAPAS-RO.png",
'Tanzania':"https://i.ibb.co/jyKLbLn/MAPAS-TZ.png",
'Malawi':"https://i.ibb.co/pn32frh/MAPAS-MW.png"
}
// var ivalue = new Array();
data.addRows([[4.711,-74.0721,'Colombia',0,'']]);
// data.addRows([[4.711,-74.0721,'Colombia']]);
// data.addRows([[4.711,-74.0721,'Colombia']]);
// ivalue['4.711'] = '';
data.addRows([[-34.6037,-58.3816,'Argentina',1,'']]);
// data.addRows([[-34.6037,-58.3816,'Argentina']]);
// ivalue['-34.6037'] = '';
data.addRows([[-29.61,28.2336,'Lesotho',2,'']]);
// data.addRows([[-29.61,28.2336,'Lesotho']]);
// ivalue['-29.61'] = '';
data.addRows([[-22.3285,24.6849,'Botswana',3,'']]);
// data.addRows([[-22.3285,24.6849,'Botswana']]);
// ivalue['-22.3285'] = '';
data.addRows([[-26.5225,31.4659,'Eswatini',4,'']]);
// data.addRows([[-26.5225,31.4659,'Eswatini']]);
// ivalue['-26.5225'] = '';
data.addRows([[1.3733,32.2903,'Uganda',5,'']]);
// data.addRows([[1.3733,32.2903,'Uganda']]);
// ivalue['1.3733'] = '';
data.addRows([[-11.2027,17.8739,'Angola',6,'']]);
// data.addRows([[-11.2027,17.8739,'Angola']]);
// ivalue['-11.2027'] = '';
data.addRows([[-13.2543,34.3015,'Malawi',7,'']]);
// data.addRows([[-13.2543,34.3015,'Malawi']]);
// ivalue['-13.2543'] = '';
data.addRows([[-6.369,34.8888,'Tanzania',8,'']]);
// data.addRows([[-6.369,34.8888,'Tanzania']]);
// ivalue['-6.369'] = '';
data.addRows([[45.9432,24.9668,'Romania',9,'']]);
// data.addRows([[45.9432,24.9668,'Romania']]);
// ivalue['45.9432'] = '';
var options = {
backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
colorAxis: {minValue: 0, maxValue: 9, colors: ['#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC','#6699CC']},
legend: 'none',
datalessRegionColor: '#f5f5f5',
displayMode: 'markers',
enableRegionInteractivity: 'true',
resolution: 'countries',
sizeAxis: {minValue: 1, maxValue:1, minSize:5, maxSize: 5},
region:'world',
keepAspectRatio: true,
width:600,
height:400,
tooltip: {textStyle: {color: '#444444'}, trigger:'focus', isHtml: false}
};
var chart = new google.visualization.GeoChart(document.getElementById('map'));
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
var span = document.getElementById("close");
google.visualization.events.addListener(chart, 'select', function(){
var selection = chart.getSelection();
var value = data.getValue(selection[0].row, 2);
console.log(value);
modal.style.display = "block";
modalImg.src = img_urls[value];
console.log(modalImg.src)
modalImg.style.width = 'auto';
modalImg.style.height = '70%';
})
span.onclick = function(){
modal.style.display = "none";
}
modal.onclick = function(){
modal.style.display = "none";
}
chart.draw(data, options);
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(255, 255, 255); /* Fallback color */
background-color: rgba(255, 255, 255, 0.349); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script src="mapa_prueba.js"></script>
<link rel="stylesheet" href="mapa.css">
</head>
<body>
<div id='map'></div>
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close", id="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
</div>
</body>
</html>
The thing is that I want the tooltip to be only the name of the country.