diff --git a/HexGrid.pm b/HexGrid.pm
index dbdb3d8..cf3ee53 100644
--- a/HexGrid.pm
+++ b/HexGrid.pm
@@ -28,7 +28,7 @@ has width => (is => 'rw', default => 1000);
 has height => (is => 'rw', default => 1000);
 has defaults => (is => 'rw', default => sub { {} });
 has make_popups => (is => 'rw', default => 1, alias => 'popups');
-has popup_class => (is => 'rw', default => 'pin-popup');
+has popup_class => (is => 'rw', default => 'popup');
 has hidden_popups => (is => 'rw', default => 1, alias => 'popups_are_hidden');
 has embed_images => (is => 'rw', default => 1);
 
diff --git a/HexGrid/Dynamic.pm b/HexGrid/Dynamic.pm
index daa246a..fc6c890 100644
--- a/HexGrid/Dynamic.pm
+++ b/HexGrid/Dynamic.pm
@@ -14,6 +14,13 @@ function clickPin(pinId, containerId) {
 	popup.style.visibility = popup.style.visibility == 'visible' ? 'hidden' : 'visible';
 }
 EOS
+$HexGrid::Dynamic::click_region = <<EOS;
+function clickRegion(regionName, x, y) {
+	// let popup = document.getElementById(pinId + '-popup');
+	// popup.style.visibility = popup.style.visibility == 'visible' ? 'hidden' : 'visible';
+	alert("" + x + "," + y);
+}
+EOS
 $HexGrid::Dynamic::toggle_coords = <<EOS;
 function toggleCoords(show) {
 	for (var elem of document.getElementsByClassName('coords')) {
@@ -38,6 +45,7 @@ sub render_html($svg, $options = undef)
 		{
 			$document .= "\n<script>\n";
 			$document .= $HexGrid::Dynamic::click_pin if $options->{pin_popups};
+			$document .= $HexGrid::Dynamic::click_region if $options->{region_popups};
 			$document .= $HexGrid::Dynamic::toggle_coords if $options->{toggle_coords};
 			$document .= "\n</script>\n";
 			$document .= $HexGrid::Dynamic::coords_toggler if $options->{toggle_coords};
diff --git a/HexGrid/Pin.pm b/HexGrid/Pin.pm
index 657a140..5c5c4ee 100644
--- a/HexGrid/Pin.pm
+++ b/HexGrid/Pin.pm
@@ -13,7 +13,7 @@ has link => (is => 'rw', alias => 'href');
 has description => (is => 'rw', alias => 'desc');
 has popup => (is => 'rw', default => 1, alias => 'use_popup');
 
-has popup_class => (is => 'rw', default => 'pin-popup');
+has popup_class => (is => 'rw', default => 'popup pin-popup');
 
 sub render($this, $pin_container, $x, $y, $w, $h, $clip_path, $layers)
 {
@@ -36,7 +36,7 @@ sub render($this, $pin_container, $x, $y, $w, $h, $clip_path, $layers)
 sub render_popup($this, $popup_container, $transform, $x_shift, $y_shift)
 {
 	my $popup_scaler = $popup_container->
-		g(id => "$this->{id}-popup",transform => $transform, class => $this->{popup_class})->
+		g(id => "$this->{id}-popup", transform => $transform, class => $this->{popup_class})->
 		svg(id => "$this->{id}-scaler");
 	my $popup = new HexGrid::PopUp
 	(
diff --git a/HexGrid/Region.pm b/HexGrid/Region.pm
index 1ee5501..2ca0cd9 100644
--- a/HexGrid/Region.pm
+++ b/HexGrid/Region.pm
@@ -16,6 +16,9 @@ has name => (is => 'rw', required => 1);
 has defaults => (is => 'rw', default => sub { {} });
 has id_suffix => (is => 'rw', default => '_region');
 
+has popup_class => (is => 'rw', default => 'popup region-popup');
+has popup => (is => 'rw', default => undef);
+
 # New region with same properties, but doesn't import tiles
 sub clone($this)
 {
@@ -48,8 +51,9 @@ sub iter_tile($this, $code)
 
 sub render($this, $svg, $grid, $layers)
 {
+	my $base_id = HexGrid::to_id("$this->{name}$this->{id_suffix}");
 	my ($min_x,$min_y,$max_x,$max_y) = qw(Inf Inf -Inf -Inf);
-	my $g = $svg->g(id => HexGrid::to_id("$this->{name}$this->{id_suffix}"));
+	my $g = $svg->g(id => $base_id);
 	foreach my $nw (keys %{$this->{tiles}})
 	{
 		foreach my $sw (keys %{$this->{tiles}{$nw}})
@@ -59,6 +63,8 @@ sub render($this, $svg, $grid, $layers)
 			{
 				my $tile_group = $this->{tiles}{$nw}{$sw}->render($g, $grid->tile_width, $grid->tile_height, $layers);
 				$tile_group->{transform} = "translate($x_translate, $y_translate)";
+				$tile_group->{onclick} = "clickRegion('$this->{name}', $x_translate, $y_translate);"
+					if ($this->popup);
 			};
 
 			$min_x = $x_translate if $x_translate < $min_x;
@@ -67,6 +73,21 @@ sub render($this, $svg, $grid, $layers)
 			$max_y = $y_translate if $y_translate > $max_y;
 		}
 	}
+	if ($this->popup)
+	{
+		push @{$layers->{popups}}, sub ($popup_container)
+		{
+			my $popup_scaler = $popup_container->
+			g(
+				id => "$base_id-popup",
+				# transform => $transform,
+				class => $this->{popup_class}
+			)->svg(id => "$base_id-scaler");
+			my $popup_element = $this->{popup}->render($popup_scaler);
+			$popup_element->{x} = 0;
+			$popup_element->{y} = 0;
+		};
+	}
 	return { min_x => $min_x,min_y => $min_y,max_x => $max_x,max_y => $max_y, group => $g };
 }
 
diff --git a/wiki-map.pl b/wiki-map.pl
index c13d7b4..02630ad 100644
--- a/wiki-map.pl
+++ b/wiki-map.pl
@@ -3,6 +3,7 @@ use rlib '.';
 
 use HexGrid;
 use HexGrid::Pin;
+use HexGrid::PopUp;
 use HexGrid::Dynamic;
 use MWTemplate;
 use MediaWiki::API;
@@ -97,6 +98,13 @@ foreach my $page (values %{$region_query_results->{query}{pages}})
 	$region->{defaults}{colour} = $parsed_template->{named_params}{colour};
 	$region->{defaults}{coords_colour} = $parsed_template->{named_params}{coordinates_colour}
 		if $parsed_template->{named_params}{coordinates_colour};
+	#TODO
+	$region->{popup} = HexGrid::PopUp->new
+	(
+		name => $region->{name},
+		description => "foo",
+		link => $page->{canonicalurl}
+	);
 	if($regiondir)
 	{
 		$regions_by_subregion{$region->{name}} = $region->{name};
@@ -130,6 +138,13 @@ foreach my $page (values %{$subregion_query_results->{query}{pages}})
 	$subregion->{defaults}{colour} = $parsed_template->{named_params}{colour};
 	$subregion->{defaults}{coords_colour} = $parsed_template->{named_params}{coordinates_colour}
 		if $parsed_template->{named_params}{coordinates_colour};
+	#TODO
+	$subregion->{popup} = HexGrid::PopUp->new
+	(
+		name => $subregion->{name},
+		description => "foo",
+		link => $page->{canonicalurl}
+	);
 	if($regiondir)
 	{
 		my $region_name = $parsed_template->{positional_params}[0];
@@ -412,7 +427,7 @@ foreach my $page (values %{$site_icon_query_results->{query}{pages}})
 # Render and output
 open (my $fh, "> $outfile") or croak "Couldn't open $outfile for writing: $!";
 say $fh ($html_document ? HexGrid::Dynamic::render_html($grid->render,
-		{ toggle_coords => $show_coords, pin_popups => 1 }) : $grid->render);
+		{ toggle_coords => $show_coords, pin_popups => 1, region_popups => 1 }) : $grid->render);
 close $fh;
 
 if($regiondir)
@@ -439,7 +454,7 @@ if($regiondir)
 		open (my $region_fh, "> $region.$extension")
 			or croak "Couldn't open $region.extension for writing: $!";
 		say $region_fh ($html_document ? HexGrid::Dynamic::render_html($grid->render,
-		{ toggle_coords => $show_coords, pin_popups => 1 }) : $region_grid->render);
+		{ toggle_coords => $show_coords, pin_popups => 1, region_popups => 1 }) : $region_grid->render);
 		close $region_fh;
 	}
 	# TODO: Location grids need to import images
@@ -449,7 +464,7 @@ if($regiondir)
 		open (my $location_fh, "> $location_name.$extension")
 			or croak "Couldn't open $location_name.$extension for writing: $!";
 		say $location_fh ($html_document ? HexGrid::Dynamic::render_html($grid->render,
-		{ toggle_coords => $show_coords, pin_popups => 1 }) : $location_grid->render);
+		{ toggle_coords => $show_coords, pin_popups => 1, region_popups => 1 }) : $location_grid->render);
 		close $location_fh;
 	}
 }