Merge pull request #423 from onaio/380-irs-map-tooltip-hint

Add hint string to Jurisdiction Selection tooltip
onaio · Aug 28, 2019 · c3f8327 · c3f8327
2 parents 615006f + b5c456d
commit c3f8327
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/configs/settings.ts b/src/configs/settings.ts
@@ -603,6 +603,9 @@ export const lineLayerConfig = {
   visible: false,
 };
 
+export const jurisdictionSelectionTooltipHint: string =
+  'Shift+Click a Jurisdiction to toggle its selection';
+
 /** Fill opacity configuration */
 export const structureFillOpacity: Expression = [
   'match',

diff --git a/src/containers/pages/InterventionPlan/IRS/plan/index.tsx b/src/containers/pages/InterventionPlan/IRS/plan/index.tsx
@@ -58,6 +58,7 @@ import {
   fillLayerConfig,
   JurisdictionLevels,
   JurisdictionsByCountry,
+  jurisdictionSelectionTooltipHint,
   JurisdictionTypes,
   lineLayerConfig,
 } from './../../../../../configs/settings';
@@ -1498,7 +1499,7 @@ class IrsPlan extends React.Component<
       const tooltipVal = tilesets[t].labelField || tilesets[t].idField;
       if (tooltipVal && tooltipVal.length) {
         (adminFillLayer as any).popup = {
-          body: `<p class="select-jurisdictin-tooltip">{{${tooltipVal}}}</p>`,
+          body: `<div><p class="select-jurisdictin-tooltip">{{${tooltipVal}}}</p><span class="select-jurisdictin-tooltip-hint">${jurisdictionSelectionTooltipHint}</span></div>`,
         };
       }
 

diff --git a/src/containers/pages/InterventionPlan/IRS/plan/style.css b/src/containers/pages/InterventionPlan/IRS/plan/style.css
@@ -56,5 +56,13 @@
 }
 
 .select-jurisdictin-tooltip {
-  padding: 6px 8px !important;
+  padding: 6px 8px 0 !important;
+  font-weight: 600 !important;
+}
+
+.select-jurisdictin-tooltip-hint {
+  color: grey;
+  font-size: 0.75rem;
+  font-style: italic;
+  padding: 0 6px 8px !important;
 }