From ee084aa8bd051ff113b870a1841765c8a393a2c2 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Wed, 19 Oct 2022 23:30:48 +0530
Subject: [PATCH] fix: add tooltip, truncate (#5096)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../booking/AvailableEventLocations.tsx           | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx
index c36dd93cca..531c0a142c 100644
--- a/apps/web/components/booking/AvailableEventLocations.tsx
+++ b/apps/web/components/booking/AvailableEventLocations.tsx
@@ -1,5 +1,6 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
+import Tooltip from "@calcom/ui/v2/core/Tooltip";
 
 import { Props } from "./pages/AvailabilityPage";
 
@@ -22,10 +23,16 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
               )}
               alt={`${eventLocationType.label} icon`}
             />
-
-            <span className="max-w-full pr-4" key={location.type}>
-              {locationKeyToString(location)}
-            </span>
+            <Tooltip content={locationKeyToString(location)}>
+              <a
+                target="_blank"
+                href={locationKeyToString(location) ?? "/"}
+                className="truncate"
+                key={location.type}
+                rel="noreferrer">
+                {locationKeyToString(location)}
+              </a>
+            </Tooltip>
           </div>
         );
       })}