[WEB-713] style: remove tooltips in mobile responsiveness

packages/ui/src/tooltip/tooltip.tsx

@@ -29,6 +29,7 @@ interface ITooltipProps {
   className?: string;
   openDelay?: number;
   closeDelay?: number;
+  isMobile?: boolean;
 }
 
 export const Tooltip: React.FC<ITooltipProps> = ({
@@ -40,14 +41,15 @@ export const Tooltip: React.FC<ITooltipProps> = ({
   className = "",
   openDelay = 200,
   closeDelay,
+  isMobile = false,
 }) => (
   <Tooltip2
     disabled={disabled}
     hoverOpenDelay={openDelay}
     hoverCloseDelay={closeDelay}
     content={
       <div
-        className={`relative z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
+        className={`relative ${isMobile ? "hidden" : "block"} z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md ${className}`}
       >
         {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
         {tooltipContent}

web/components/api-token/modal/generated-token-details.tsx

@@ -6,6 +6,8 @@ import { renderFormattedDate } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { IApiToken } from "@plane/types";
+// hooks
+import { usePlatformOS } from "hooks/use-platform-os";
 
 type Props = {
   handleClose: () => void;
@@ -14,7 +16,7 @@ type Props = {
 
 export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   const { handleClose, tokenDetails } = props;
-
+  const { isMobile } = usePlatformOS();
   const copyApiToken = (token: string) => {
     copyTextToClipboard(token).then(() =>
       setToast({
@@ -40,7 +42,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
         className="mt-4 flex w-full items-center justify-between rounded-md border-[0.5px] border-custom-border-200 px-3 py-2 text-sm font-medium outline-none"
       >
         {tokenDetails.token}
-        <Tooltip tooltipContent="Copy secret key">
+        <Tooltip tooltipContent="Copy secret key" isMobile={isMobile}>
           <Copy className="h-4 w-4 text-custom-text-400" />
         </Tooltip>
       </button>

web/components/api-token/token-list-item.tsx

@@ -3,6 +3,7 @@ import { XCircle } from "lucide-react";
 // components
 import { Tooltip } from "@plane/ui";
 import { DeleteApiTokenModal } from "components/api-token";
+import { usePlatformOS } from "hooks/use-platform-os";
 // ui
 // helpers
 import { renderFormattedDate, calculateTimeAgo } from "helpers/date-time.helper";
@@ -17,12 +18,14 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
   const { token } = props;
   // states
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  // hooks
+  const { isMobile } = usePlatformOS();
 
   return (
     <>
       <DeleteApiTokenModal isOpen={deleteModalOpen} onClose={() => setDeleteModalOpen(false)} tokenId={token.id} />
       <div className="group relative flex flex-col justify-center border-b border-custom-border-200 px-4 py-3">
-        <Tooltip tooltipContent="Delete token">
+        <Tooltip tooltipContent="Delete token" isMobile={isMobile}>
           <button
             onClick={() => setDeleteModalOpen(true)}
             className="absolute right-4 hidden place-items-center group-hover:grid"
@@ -33,9 +36,8 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
         <div className="flex w-4/5 items-center">
           <h5 className="truncate text-sm font-medium">{token.label}</h5>
           <span
-            className={`${
-              token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
-            } ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
+            className={`${token.is_active ? "bg-green-500/10 text-green-500" : "bg-custom-background-80 text-custom-text-400"
+              } ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
           >
             {token.is_active ? "Active" : "Expired"}
           </span>

web/components/command-palette/command-modal.tsx

@@ -20,12 +20,11 @@ import {
 } from "components/command-palette";
 import { ISSUE_DETAILS } from "constants/fetch-keys";
 import { useApplication, useEventTracker, useProject } from "hooks/store";
+import { usePlatformOS } from "hooks/use-platform-os";
 // services
 import useDebounce from "hooks/use-debounce";
 import { IssueService } from "services/issue";
 import { WorkspaceService } from "services/workspace.service";
-// hooks
-// components
 // types
 import { IWorkspaceSearchResults } from "@plane/types";
 // fetch-keys
@@ -37,6 +36,7 @@ const issueService = new IssueService();
 export const CommandModal: React.FC = observer(() => {
   // hooks
   const { getProjectById } = useProject();
+  const { isMobile } = usePlatformOS();
   // states
   const [placeholder, setPlaceholder] = useState("Type a command or search...");
   const [resultsCount, setResultsCount] = useState(0);
@@ -197,7 +197,7 @@ export const CommandModal: React.FC = observer(() => {
                         </div>
                       )}
                       {projectId && (
-                        <Tooltip tooltipContent="Toggle workspace level search">
+                        <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
                           <div className="flex flex-shrink-0 cursor-pointer items-center gap-1 self-end text-xs sm:self-center">
                             <button
                               type="button"

web/components/common/breadcrumb-link.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Tooltip } from "@plane/ui";
+import { usePlatformOS } from "hooks/use-platform-os";
 
 type Props = {
   label?: string;
@@ -9,8 +10,9 @@ type Props = {
 
 export const BreadcrumbLink: React.FC<Props> = (props) => {
   const { href, label, icon } = props;
+  const { isMobile } = usePlatformOS();
   return (
-    <Tooltip tooltipContent={label} position="bottom">
+    <Tooltip tooltipContent={label} position="bottom" isMobile={isMobile}>
       <li className="flex items-center space-x-2" tabIndex={-1}>
         <div className="flex flex-wrap items-center gap-2.5">
           {href ? (

web/components/core/activity.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
+import { usePlatformOS } from "hooks/use-platform-os";
 // store hooks
 // icons
 import {
@@ -29,9 +30,13 @@ import { IIssueActivity } from "@plane/types";
 export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  const { isMobile } = usePlatformOS();
 
   return (
-    <Tooltip tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
+    <Tooltip
+      tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}
+      isMobile={isMobile}
+    >
       {activity?.issue_detail ? (
         <a
           aria-disabled={activity.issue === null}

web/components/core/modals/existing-issues-list-modal.tsx

@@ -5,7 +5,7 @@ import { Rocket, Search, X } from "lucide-react";
 import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 
 import useDebounce from "hooks/use-debounce";
-
+import { usePlatformOS } from "hooks/use-platform-os";
 import { ProjectService } from "services/project";
 // ui
 // types
@@ -40,7 +40,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
   const [isSearching, setIsSearching] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
-
+  const  { isMobile } = usePlatformOS();
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
   const handleClose = () => {
@@ -154,7 +154,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                       </div>
                     )}
                     {workspaceLevelToggle && (
-                      <Tooltip tooltipContent="Toggle workspace level search">
+                      <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
                         <div
                           className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
                             isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"

web/components/core/sidebar/links-list.tsx

@@ -7,6 +7,7 @@ import { ExternalLinkIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 import { calculateTimeAgo } from "helpers/date-time.helper";
 // hooks
 import { useMember } from "hooks/store";
+import { usePlatformOS } from "hooks/use-platform-os";
 // types
 import { ILinkDetails, UserAuth } from "@plane/types";
 
@@ -19,7 +20,7 @@ type Props = {
 
 export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, handleEditLink, userAuth }) => {
   const { getUserDetails } = useMember();
-
+  const { isMobile } = usePlatformOS();
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   const copyToClipboard = (text: string) => {
@@ -42,7 +43,7 @@ export const LinksList: React.FC<Props> = observer(({ links, handleDeleteLink, h
                 <span className="py-1">
                   <LinkIcon className="h-3 w-3 flex-shrink-0" />
                 </span>
-                <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url}>
+                <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
                   <span
                     className="cursor-pointer truncate text-xs"
                     onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}

web/components/cycles/active-cycle/root.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import useSWR from "swr";
 // hooks
 import { useCycle, useCycleFilter, useIssues, useMember, useProject } from "hooks/store";
+import { usePlatformOS } from "hooks/use-platform-os";
 // ui
 import { SingleProgressStats } from "components/core";
 import {
@@ -46,6 +47,8 @@ interface IActiveCycleDetails {
 export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
   // props
   const { workspaceSlug, projectId } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
   // store hooks
   const {
     issues: { fetchActiveCycleIssues },
@@ -197,7 +200,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                   <span className="h-5 w-5">
                     <CycleGroupIcon cycleGroup={cycleStatus} className="h-4 w-4" />
                   </span>
-                  <Tooltip tooltipContent={activeCycle.name} position="top-left">
+                  <Tooltip tooltipContent={activeCycle.name} position="top-left" isMobile={isMobile}>
                     <h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3>
                   </Tooltip>
                 </span>
@@ -325,14 +328,15 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                       <PriorityIcon priority={issue.priority} withContainer size={12} />
 
                       <Tooltip
+                        isMobile={isMobile}
                         tooltipHeading="Issue ID"
                         tooltipContent={`${currentProjectDetails?.identifier}-${issue.sequence_id}`}
                       >
                         <span className="flex-shrink-0 text-xs text-custom-text-200">
                           {currentProjectDetails?.identifier}-{issue.sequence_id}
                         </span>
                       </Tooltip>
-                      <Tooltip position="top-left" tooltipContent={issue.name}>
+                      <Tooltip position="top-left" tooltipContent={issue.name} isMobile={isMobile}>
                         <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
                       </Tooltip>
                     </div>
@@ -345,7 +349,7 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                         buttonVariant="background-with-text"
                       />
                       {issue.target_date && (
-                        <Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)}>
+                        <Tooltip tooltipHeading="Target Date" tooltipContent={renderFormattedDate(issue.target_date)} isMobile={isMobile}>
                           <div className="flex h-full cursor-not-allowed items-center gap-1.5 rounded bg-custom-background-80 px-2 py-0.5 text-xs">
                             <CalendarCheck className="h-3 w-3 flex-shrink-0" />
                             <span className="text-xs">{renderFormattedDateWithoutYear(issue.target_date)}</span>

web/components/cycles/board/cycles-board-card.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
+import { usePlatformOS } from "hooks/use-platform-os";
 // components
 import { Info, Star } from "lucide-react";
 import { Avatar, AvatarGroup, Tooltip, LayersIcon, CycleGroupIcon, setPromiseToast } from "@plane/ui";
@@ -38,6 +39,8 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
   const { getUserDetails } = useMember();
   // computed
   const cycleDetails = getCycleById(cycleId);
+  // hooks
+  const { isMobile } = usePlatformOS();
 
   if (!cycleDetails) return null;
 
@@ -145,7 +148,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
               <span className="flex-shrink-0">
                 <CycleGroupIcon cycleGroup={cycleStatus as TCycleGroups} className="h-3.5 w-3.5" />
               </span>
-              <Tooltip tooltipContent={cycleDetails.name} position="top">
+              <Tooltip tooltipContent={cycleDetails.name} position="top" isMobile={isMobile}>
                 <span className="truncate text-base font-medium">{cycleDetails.name}</span>
               </Tooltip>
             </div>
@@ -176,7 +179,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
                 <span className="text-xs text-custom-text-300">{issueCount}</span>
               </div>
               {cycleDetails.assignee_ids.length > 0 && (
-                <Tooltip tooltipContent={`${cycleDetails.assignee_ids.length} Members`}>
+                <Tooltip tooltipContent={`${cycleDetails.assignee_ids.length} Members`} isMobile={isMobile}>
                   <div className="flex cursor-default items-center gap-1">
                     <AvatarGroup showTooltip={false}>
                       {cycleDetails.assignee_ids.map((assigne_id) => {
@@ -190,6 +193,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = observer((props) => {
             </div>
 
             <Tooltip
+              isMobile={isMobile}
               tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
               position="top-left"
             >

web/components/cycles/cycles-view-header.tsx

@@ -5,6 +5,7 @@ import { ListFilter, Search, X } from "lucide-react";
 // hooks
 import { useCycleFilter } from "hooks/store";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
+import { usePlatformOS } from "hooks/use-platform-os";
 // components
 import { CycleFiltersSelection } from "components/cycles";
 import { FiltersDropdown } from "components/issues";
@@ -36,6 +37,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
     updateFilters,
     updateSearchQuery,
   } = useCycleFilter();
+  const { isMobile } = usePlatformOS();
   // outside click detector hook
   useOutsideClickDetector(inputRef, () => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
@@ -134,7 +136,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
           </FiltersDropdown>
           <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
             {CYCLE_VIEW_LAYOUTS.map((layout) => (
-              <Tooltip key={layout.key} tooltipContent={layout.title}>
+              <Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
                 <button
                   type="button"
                   className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${

web/components/cycles/gantt-chart/blocks.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // hooks
+import { usePlatformOS } from "hooks/use-platform-os";
 // ui
 import { Tooltip, ContrastIcon } from "@plane/ui";
 // helpers
@@ -23,7 +24,7 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
   const { getCycleById } = useCycle();
   // derived values
   const cycleDetails = getCycleById(cycleId);
-
+  const { isMobile } = usePlatformOS();
   const cycleStatus = cycleDetails?.status.toLocaleLowerCase();
 
   return (
@@ -45,6 +46,7 @@ export const CycleGanttBlock: React.FC<Props> = observer((props) => {
     >
       <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
       <Tooltip
+        isMobile={isMobile}
         tooltipContent={
           <div className="space-y-1">
             <h5>{cycleDetails?.name}</h5>

web/components/cycles/list/cycles-list-item.tsx

@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
+import { usePlatformOS } from "hooks/use-platform-os";
 import { Check, Info, Star, User2 } from "lucide-react";
 import { Tooltip, CircularProgressIndicator, CycleGroupIcon, AvatarGroup, Avatar, setPromiseToast } from "@plane/ui";
 import { CycleQuickActions } from "components/cycles";
@@ -33,6 +34,8 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
   const { cycleId, workspaceSlug, projectId } = props;
   // router
   const router = useRouter();
+  // hooks
+  const { isMobile } = usePlatformOS();
   // store hooks
   const { captureEvent } = useEventTracker();
   const {
@@ -164,7 +167,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
 
               <div className="relative flex items-center gap-2.5 overflow-hidden">
                 <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
-                <Tooltip tooltipContent={cycleDetails.name} position="top">
+                <Tooltip tooltipContent={cycleDetails.name} position="top" isMobile={isMobile}>
                   <span className="line-clamp-1 inline-block overflow-hidden truncate text-base font-medium">
                     {cycleDetails.name}
                   </span>
@@ -196,7 +199,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
             </div>
 
             <div className="relative flex flex-shrink-0 items-center gap-3">
-              <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`}>
+              <Tooltip tooltipContent={`${cycleDetails.assignee_ids?.length} Members`} isMobile={isMobile}>
                 <div className="flex w-10 cursor-default items-center justify-center">
                   {cycleDetails.assignee_ids?.length > 0 ? (
                     <AvatarGroup showTooltip={false}>