CODEWITHSUNDEEP
javascripthtmlcssfontsgoogle-visualization
Henry Manson
Henry Manson

Reputation: 41

Change text font on tooltip

I'm trying to change the font of the text of the tooltip of the following code. Nevertheless, I would like to know which fonts are available and and how to import a new font onto the project. I would like to import it and use it easily. I just don't know how to do it, I think it can be donde using the CSS but no idea how to get the tooltip element in order to change dthe fon of it.

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/dtqTMwH/MAPAS-Colombia.png",
      'Argentina': "https://i.ibb.co/b2JKpHj/MAPAS-Argentina-02.png",
      'Lesotho': "https://i.ibb.co/02p3Jvw/MAPAS-Lesotho.png",
      'Eswatini': "https://i.ibb.co/k6qJPHc/MAPAS-Eswatini.png",
      'Uganda': "https://i.ibb.co/MssKBLj/MAPAS-UGANDA.png",
      'Botswana': "https://i.ibb.co/N33X4FH/MAPAS-Botswana.png",
      'Angola': "https://i.ibb.co/jvcs3cB/MAPAS-Angola.png",
      'Romania': "https://i.ibb.co/Zft1R2Q/MAPAS-Romania.png",
      'Tanzania': "https://i.ibb.co/dcLtb9w/MAPAS-Tanzania.png",
      'Malawi': "https://i.ibb.co/NjP7W8H/MAPAS-Malawi.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: ['#175E32', '#175E32', '#175E32', '#175E32', '#175E32', '#175E32', '#175E32', '#175E32', '#175E32', '#175E32']
      },
      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',
          fontName: 'alternate',
          fontSize:15,
        },
        trigger: 'focus',
        isHtml: true
      }
    };
  
  
    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">&times;</span>
      
        <!-- Modal Content (The Image) -->
        <img class="modal-content" id="img01">
      
    </div>

</body>
</html>

Any idea how to do it?

Thanks

Upvotes: 2

Views: 164

Answers (1)

A Haworth
A Haworth

Reputation: 36512

The font settings are defined the options variable which is set up in the function drawVisualization.

 tooltip: {
        textStyle: {
          color: '#444444',
          fontName: 'alternate'
          fontSize:15,
        },
        trigger: 'focus',
        isHtml: true
      }

Going a bit extreme, but to demonstrate that we have the right place, here is an example with the color, size and fontName set to red, 50 and cursive:

enter image description here

You probably only want to change the fontName, possibly to a font you have imported (?)

Upvotes: 1

Related Questions