diff --git a/seshat/apps/core/templates/core/world_map.html b/seshat/apps/core/templates/core/world_map.html index 5f0f123ba..6f296d996 100644 --- a/seshat/apps/core/templates/core/world_map.html +++ b/seshat/apps/core/templates/core/world_map.html @@ -219,14 +219,13 @@ opacity: 1; } - .variable-info-container { + .info-container { position: relative; display: inline-block; cursor: pointer; } - .variable-info-container::after { - content: "Polity polygons on the map are colored based on the selected variable. Select 'Political boundaries' to assign a unique color to each polity."; + .info-container::after { visibility: hidden; width: 200px; background-color: #782823; @@ -241,8 +240,16 @@ opacity: 0; transition: opacity 0.3s; } + + #variable-info-container::after { + content: "Polity polygons on the map are colored based on the selected variable. Select 'Political boundaries' to assign a unique color to each polity."; + } + + #selection-info-container::after { + content: "Checking 'Hide unselected' hides all unselected polities. Checking 'Select all' highlights all polities. Click 'Clear selection' to deselect all polities."; + } - .variable-info-container:hover::after { + .info-container:hover::after { visibility: visible; opacity: 1; } @@ -368,7 +375,7 @@ left: 5%; } - .display-info-container::after, .variable-info-container::after, .previouslySelectedVariable-container::after { + .display-info-container::after, .info-container::after, .previouslySelectedVariable-container::after { width: 300px; right: 100%; } @@ -448,7 +455,7 @@

style="width: 300px; text-overflow: ellipsis;" disabled> -
+
ℹ️
@@ -478,7 +485,10 @@

-
+ +
+ ℹ️ +