This is a sample map of Austria with a custom tooltips styling. The maps are generated by the Google Geochart API. This API wraps the tooltip content in a div that has the class google-visualization-tooltip. We can use this class to make some customizations.

The following table shows the default tooltip and the customized version from above:

background-color: white;
border: 1px solid #bdbdbd;
border-radius: 2px;
box-shadow: 0 2px 2px 
0 rgba(204, 204, 204, 0.6);

background-color: #f6f6f6;
border: 1px solid #dddddd;
border-bottom: 2px solid 
#dddddd;
border-radius: 5px;
box-shadow: 0 2px 2px 
0 rgba(204, 204, 204, 0.6);

The map from above uses HTML tooltips. We used following construction for our tooltips:

<div class="tooltip-wrap">
   <p class="tooltip-header">Linz</p>
   <p class="tooltip-body">Linz is the...</p>
   <small>From Wikipedia, the free encyclopedia</small>
</div>

The following box shows the configuration of the example map. The CSS for our tooltips can be found in the “Map Template” section:

×Close

Download map

• Import data
• Help & Instructions

Copy the following text and click on "Import" in the plugin.

{"name":"Map of Austria with Tooltip Styling","description":"","js_options":"{\"background_color\":\"#ffffff\",\"border_color\":\"#666666\",\"border_width\":\"0\",\"dataless_regions_color\":\"#efefef\",\"enable_region_interactivity\":\"false\",\"height\":\"auto\",\"keep_aspect_ratio\":\"true\",\"region\":\"AT\",\"marker_opacity\":1,\"marker_size\":\"9\",\"resolution\":\"provinces\",\"tooltip_enable\":\"true\",\"tooltip_color\":\"#000000\",\"tooltip_font_family\":\"<global-font-name>\",\"tooltip_font_size\":\"<global-font-size>\",\"tooltip_trigger\":\"focus\",\"tooltip_html\":\"true\",\"width\":\"auto\"}","js_table":"[{\"location\":\"Vienna\",\"latitude\":\"48.2081743\",\"longitude\":\"16.3738189\",\"color\":\"#222e75\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"<div class=\\\"tooltip-wrap\\\">\\n<p class=\\\"tooltip-header\\\">Vienna<\\\/p>\\n<p class=\\\"tooltip-body\\\">Vienna is the capital and largest city of Austria, and one of the nine states of Austria. Vienna is Austria's primary city, with a population of about 1.757 million, and its cultural, economic, and political centre.<\\\/p>\\n<small>From Wikipedia, the free encyclopedia<\\\/small><\\\/div>\",\"click_action_value\":\"\"},{\"location\":\"Salzburg\",\"latitude\":\"47.80949\",\"longitude\":\"13.05501\",\"color\":\"#4668c4\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"<div class=\\\"tooltip-wrap\\\">\\n<p class=\\\"tooltip-header\\\">Salzburg<\\\/p>\\n<p class=\\\"tooltip-body\\\">Salzburg is the fourth-largest city in Austria and the capital of the federal state of Salzburg.<br><br>\\nSalzburg was the birthplace of 18th-century composer Wolfgang Amadeus Mozart. <\\\/p>\\n<small>From Wikipedia, the free encyclopedia<\\\/small><\\\/div>\",\"click_action_value\":\"\"},{\"location\":\"Graz\",\"latitude\":\"47.070714\",\"longitude\":\"15.439504\",\"color\":\"#294984\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"<div class=\\\"tooltip-wrap\\\">\\n<p class=\\\"tooltip-header\\\">Graz<\\\/p>\\n<p class=\\\"tooltip-body\\\">Salzburg Graz, formerly known as Gratz, is the second-largest city in Austria after Vienna and the capital of the federal state of Styria (Steiermark). On 9 January 2014 it had a population of 303,731 (of which 271,998 had principal residence status). In 2012 the population of the Graz Larger Urban Zone who had principal residence status stood at 599,049.<\\\/p>\\n<small>From Wikipedia, the free encyclopedia<\\\/small><\\\/div>\",\"click_action_value\":\"\"},{\"location\":\"Linz\",\"latitude\":\"48.30694\",\"longitude\":\"14.28583\",\"color\":\"#3b52a5\",\"size\":\"1\",\"tooltip_title\":\"\",\"tooltip_text\":\"<div class=\\\"tooltip-wrap\\\">\\n<p class=\\\"tooltip-header\\\">Linz<\\\/p>\\n<p class=\\\"tooltip-body\\\">Linz is the third-largest city of Austria and capital of the state of Upper Austria (German: Ober\\u00f6sterreich). It is located in the north centre of Austria, approximately 30 kilometres (19 miles) south of the Czech border, on both sides of the river Danube.<\\\/p>\\n<small>From Wikipedia, the free encyclopedia<\\\/small><\\\/div>\",\"click_action_value\":\"\"}]","display_mode":"marker_by_coordinates","template_id":-2,"template_html":"<div id=\"{cssid}\">\n %%map%%\n<\/div>","template_css":"#{cssid} .tooltip-wrap {\n max-width: 250px;\n}\n#{cssid} .google-visualization-tooltip {\n border-radius: 5px;\n background-color: #f6f6f6;\n border: 1px solid #dddddd;\n border-bottom: 2px solid #dddddd;\n}\n#{cssid} .tooltip-header {\n padding: 10px;\n font-size: 1.8em;\n font-family: Times,serif;\n \n}\n#{cssid} .tooltip-body {\n border: 1px solid #efefef;\n border-bottom: 2px solid #efefef;\n background-color: #ffffff;\n border-radius: 5px;\n padding: 10px;\n}\n#{cssid} small {\n padding-left: 5px;\n}\n#{cssid} circle {\n cursor: pointer;\n}","template_js":""}

This explains step-by-step what you have to do:

The first step is to open the "All Maps" page. On this page you will find an "Import" button. If you click on this button, a small window should open. You have to select the "text" tab and insert the import data there. The final step is to click on "Import". The Map Builder should open with the given map. Note that you have to click on the "Save" button. Otherwise the map won't be imported.

Close

#{cssid} .tooltip-wrap {
  max-width: 250px;
}
#{cssid} .google-visualization-tooltip {
  border-radius: 5px;
  background-color: #f6f6f6;
  border: 1px solid #dddddd;
  border-bottom: 2px solid #dddddd;
}
#{cssid} .tooltip-header {
  padding: 10px;
  font-size: 1.8em;
  font-family: Times,serif;
  
}
#{cssid} .tooltip-body {
    border: 1px solid #efefef;
    border-bottom: 2px solid #efefef;
  background-color: #ffffff;
    border-radius: 5px;
    padding: 10px;
}
#{cssid} small {
  padding-left: 5px;
}
#{cssid} circle {
  cursor: pointer;
}

<div id="{cssid}">
  %%map%%
</div>