Merge pull request #647 from amyyeung17/612-tooltips

Fix #612: Added tooltips for SinglePropertyDetail and MapLegend
CodeForPhilly · May 28, 2024 · b56d552 · b56d552
2 parents 713310d + f1b9530
commit b56d552
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 15 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -345,6 +345,33 @@ a .bg-color-none {
   background-image: url('data:image/svg+xml,<svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 0.724609C15.5 0.89037 15.4342 1.04934 15.3169 1.16655C15.1997 1.28376 15.0408 1.34961 14.875 1.34961H1.125C0.95924 1.34961 0.800269 1.28376 0.683058 1.16655C0.565848 1.04934 0.5 0.89037 0.5 0.724609C0.5 0.558849 0.565848 0.399878 0.683058 0.282668C0.800269 0.165458 0.95924 0.0996094 1.125 0.0996094H14.875C15.0408 0.0996094 15.1997 0.165458 15.3169 0.282668C15.4342 0.399878 15.5 0.558849 15.5 0.724609Z" fill="%2303141B"/></svg>') !important;
 }
 
+/* Tooltips for maplibre components, classes style the title attributes */
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate[title]:hover::after,
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-in[title]:hover::after,
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-out[title]:hover::after {
+  content: attr(title);
+  font-size: 14px;
+  padding: 4px 10px;
+  width: max-content;
+  z-index: 100;
+  @apply absolute items-center flex bg-gray-900 rounded-[14px] text-white z-[75];
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-geolocate[title]:hover::after {
+  transform: translateX(-102.5%);
+  @apply top-1.5;
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-in[title]:hover::after {
+  transform: translateX(-105.5%);
+  @apply top-1.5;
+}
+
+.maplibregl-ctrl button.maplibregl-ctrl-zoom-out[title]:hover::after {
+  transform: translateX(-105.5%);
+  @apply top-[46px];
+}
+
 /* styling for the map tooltip */
 .customized-map-popup {
   .maplibregl-popup-content {

diff --git a/src/components/SinglePropertyDetail.tsx b/src/components/SinglePropertyDetail.tsx
@@ -232,14 +232,24 @@ const SinglePropertyDetail = ({
             objectFit="cover"
             unoptimized
           />
-          <button
-            className="absolute top-4 right-4 bg-white p-[10px] rounded-md hover:bg-gray-100"
-            onClick={() => setIsStreetViewModalOpen(true)}
-            aria-label="Open full screen street view map"
-            id="outside-iframe-element"
+          <Tooltip
+            disableAnimation
+            closeDelay={100}
+            placement="top"
+            content="Street View"
+            classNames={{
+              content: "bg-gray-900 rounded-[14px] text-white relative top-[5px]",
+            }}
           >
-            <ArrowsOut color="#3D3D3D" size={24} />
-          </button>
+            <button
+              className="absolute top-4 right-4 bg-white p-[10px] rounded-md hover:bg-gray-100"
+              onClick={() => setIsStreetViewModalOpen(true)}
+              aria-label="Open full screen street view map"
+              id="outside-iframe-element"
+            >
+              <ArrowsOut color="#3D3D3D" size={24} />
+            </button>
+          </Tooltip>
         </div>
       </div>
       <div className="py-4 px-2">
@@ -253,14 +263,24 @@ const SinglePropertyDetail = ({
             {address.toLowerCase()}
           </h2>
           <div>
-            <ThemeButtonLink
-              href={atlasUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              color="tertiary"
-              label="Atlas"
-              endContent={<ArrowSquareOut aria-hidden="true" />}
-            />
+            <Tooltip
+              disableAnimation
+              closeDelay={100}
+              placement="top"
+              content="View on City Atlas"
+              classNames={{
+                content: "bg-gray-900 rounded-[14px] text-white relative top-1",
+              }}
+            >
+              <ThemeButtonLink
+                href={atlasUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                color="tertiary"
+                label="Atlas"
+                endContent={<ArrowSquareOut aria-hidden="true" />}
+              />
+            </Tooltip>
           </div>
         </div>
       </div>