feat: integrate tooltip functionality across various components

- Added TooltipProvider and Tooltip components to enhance user experience with contextual information. - Wrapped existing components such as TeamListView, TeamDetailView, and SendMessageDialog with tooltips for better interaction feedback. - Implemented MessagesFilterPopover to allow filtering messages by sender and recipient, improving message management. - Updated KanbanBoard and KanbanFilterPopover to include tooltips for view mode buttons, enhancing usability. These changes aim to provide users with clearer guidance and improve overall interaction within the application.
2026-02-23 12:09:23 +02:00 · 2026-02-23 12:09:23 +02:00 · 58f06576d3
commit 58f06576d3
parent c793426247
10 changed files with 565 additions and 254 deletions
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@ -4,6 +4,7 @@ import { ConfirmDialog } from './components/common/ConfirmDialog';
 import { ContextSwitchOverlay } from './components/common/ContextSwitchOverlay';
 import { ErrorBoundary } from './components/common/ErrorBoundary';
 import { TabbedLayout } from './components/layout/TabbedLayout';
+import { TooltipProvider } from './components/ui/tooltip';
 import { useTheme } from './hooks/useTheme';
 import { api } from './api';
 import { initializeNotificationListeners, useStore } from './store';
@ -43,9 +44,11 @@ export const App = (): React.JSX.Element => {

  return (
    <ErrorBoundary>
+      <TooltipProvider delayDuration={300}>
        <ContextSwitchOverlay />
        <TabbedLayout />
        <ConfirmDialog />
+      </TooltipProvider>
    </ErrorBoundary>
  );
 };
--- a/src/renderer/components/team/TeamDetailView.tsx
+++ b/src/renderer/components/team/TeamDetailView.tsx
@ -19,11 +19,13 @@ import { KanbanBoard } from './kanban/KanbanBoard';
 import { UNASSIGNED_OWNER } from './kanban/KanbanFilterPopover';
 import { MemberDetailDialog } from './members/MemberDetailDialog';
 import { MemberList } from './members/MemberList';
+import { MessagesFilterPopover } from './messages/MessagesFilterPopover';
 import { CollapsibleTeamSection } from './CollapsibleTeamSection';
 import { TeamProvisioningBanner } from './TeamProvisioningBanner';
 import { TeamSessionsSection } from './TeamSessionsSection';

 import type { KanbanFilterState } from './kanban/KanbanFilterPopover';
+import type { MessagesFilterState } from './messages/MessagesFilterPopover';
 import type { Session } from '@renderer/types/data';
 import type { ResolvedTeamMember, TeamTask } from '@shared/types';

@ -134,6 +136,12 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
  );

  const [kanbanSearch, setKanbanSearch] = useState('');
+  const [messagesSearchQuery, setMessagesSearchQuery] = useState('');
+  const [messagesFilter, setMessagesFilter] = useState<MessagesFilterState>({
+    from: new Set(),
+    to: new Set(),
+  });
+  const [messagesFilterOpen, setMessagesFilterOpen] = useState(false);

  useEffect(() => {
    if (!teamName) {
@ -251,12 +259,31 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele

  const filteredMessages = useMemo(() => {
    if (!data) return [];
-    if (!timeWindow) return data.messages;
-    return data.messages.filter((m) => {
+    let list = data.messages;
+    if (timeWindow) {
+      list = list.filter((m) => {
        const ts = new Date(m.timestamp).getTime();
        return ts >= timeWindow.start && ts < timeWindow.end;
      });
-  }, [data, timeWindow]);
+    }
+    if (messagesFilter.from.size > 0) {
+      list = list.filter((m) => m.from?.trim() && messagesFilter.from.has(m.from.trim()));
+    }
+    if (messagesFilter.to.size > 0) {
+      list = list.filter((m) => m.to?.trim() && messagesFilter.to.has(m.to.trim()));
+    }
+    const q = messagesSearchQuery.trim().toLowerCase();
+    if (q) {
+      list = list.filter((m) => {
+        const text = (m.text ?? '').toLowerCase();
+        const summary = (m.summary ?? '').toLowerCase();
+        const from = (m.from ?? '').toLowerCase();
+        const to = (m.to ?? '').toLowerCase();
+        return text.includes(q) || summary.includes(q) || from.includes(q) || to.includes(q);
+      });
+    }
+    return list;
+  }, [data, timeWindow, messagesFilter, messagesSearchQuery]);

  const kanbanDisplayTasks = useMemo(() => {
    const query = kanbanSearch.trim();
@ -593,10 +620,30 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
        badge={filteredMessages.length}
        defaultOpen
        action={
+          <div className="flex items-center gap-2 pl-2">
+            <div className="flex w-36 items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1">
+              <Search size={12} className="shrink-0 text-[var(--color-text-muted)]" />
+              <input
+                type="search"
+                placeholder="Поиск..."
+                value={messagesSearchQuery}
+                onChange={(e) => setMessagesSearchQuery(e.target.value)}
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={(e) => e.stopPropagation()}
+                className="min-w-0 flex-1 bg-transparent text-xs text-[var(--color-text)] placeholder:text-[var(--color-text-muted)] focus:outline-none"
+              />
+            </div>
+            <MessagesFilterPopover
+              filter={messagesFilter}
+              messages={data?.messages ?? []}
+              open={messagesFilterOpen}
+              onOpenChange={setMessagesFilterOpen}
+              onApply={setMessagesFilter}
+            />
            <Button
              variant="outline"
              size="sm"
-            className="h-7 gap-1.5 px-2.5 text-xs font-medium text-[var(--color-text)]"
+              className="h-7 shrink-0 gap-1.5 px-2.5 text-xs font-medium text-[var(--color-text)]"
              onClick={(e) => {
                e.stopPropagation();
                setSendDialogRecipient(undefined);
@ -607,6 +654,7 @@ export const TeamDetailView = ({ teamName }: TeamDetailViewProps): React.JSX.Ele
              <MessageSquare size={12} />
              Message
            </Button>
+          </div>
        }
      >
        <ActivityTimeline
--- a/src/renderer/components/team/TeamListView.tsx
+++ b/src/renderer/components/team/TeamListView.tsx
@ -4,6 +4,12 @@ import { api, isElectronMode } from '@renderer/api';
 import { Badge } from '@renderer/components/ui/badge';
 import { Button } from '@renderer/components/ui/button';
 import { Input } from '@renderer/components/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@renderer/components/ui/tooltip';
 import { getTeamColorSet } from '@renderer/constants/teamColors';
 import { useStore } from '@renderer/store';
 import { buildTaskCountsByTeam, normalizePath } from '@renderer/utils/pathNormalize';
@ -377,6 +383,7 @@ export const TeamListView = (): React.JSX.Element => {
  }

  return (
+    <TooltipProvider delayDuration={300}>
      <div className="size-full overflow-auto p-4">
        {renderHeader()}

@ -423,22 +430,30 @@ export const TeamListView = (): React.JSX.Element => {
                        <StatusBadge status={status} />
                      </div>
                      <div className="flex shrink-0 gap-1">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
                            <button
                              type="button"
                              className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-blue-500/10 hover:text-blue-300 group-hover:opacity-100"
                              onClick={(e) => handleCopyTeam(team.teamName, e)}
-                        title="Copy team"
                            >
                              <Copy size={14} />
                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="bottom">Copy team</TooltipContent>
+                        </Tooltip>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
                            <button
                              type="button"
                              className="shrink-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-red-500/10 hover:text-red-300 group-hover:opacity-100"
                              onClick={(e) => handleDeleteTeam(team.teamName, e)}
-                        title="Delete team"
                            >
                              <Trash2 size={14} />
                            </button>
+                          </TooltipTrigger>
+                          <TooltipContent side="bottom">Delete team</TooltipContent>
+                        </Tooltip>
                      </div>
                    </div>
                    <p className="mt-2 line-clamp-2 min-h-10 text-xs text-[var(--color-text-muted)]">
@ -479,7 +494,10 @@ export const TeamListView = (): React.JSX.Element => {
                      )}
                      {(() => {
                        const tc = taskCountsByTeam.get(team.teamName);
-                      if (!tc || (tc.pending === 0 && tc.inProgress === 0 && tc.completed === 0)) {
+                        if (
+                          !tc ||
+                          (tc.pending === 0 && tc.inProgress === 0 && tc.completed === 0)
+                        ) {
                          return (
                            <Badge variant="secondary" className="text-[10px] font-normal">
                              Tasks: 0
@ -536,5 +554,6 @@ export const TeamListView = (): React.JSX.Element => {
        )}
        {createDialogElement}
      </div>
+    </TooltipProvider>
  );
 };
--- a/src/renderer/components/team/TeamSessionsSection.tsx
+++ b/src/renderer/components/team/TeamSessionsSection.tsx
@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';

+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { useStore } from '@renderer/store';
 import { formatDistanceToNowStrict } from 'date-fns';
 import {
@ -205,9 +206,10 @@ const SessionRow = ({
      </button>

      <div className="flex shrink-0 items-center gap-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
            <button
              type="button"
-          title={isSelected ? 'Remove filter' : 'Filter by this session'}
              className={`rounded p-0.5 text-[var(--color-text-muted)] transition-opacity hover:text-blue-400 ${
                isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
              }`}
@ -218,6 +220,13 @@ const SessionRow = ({
            >
              {isSelected ? <FilterX size={12} /> : <Filter size={12} />}
            </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            {isSelected ? 'Remove filter' : 'Filter by this session'}
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
            <button
              type="button"
              className="rounded p-0.5 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:text-[var(--color-text)] group-hover:opacity-100"
@ -228,6 +237,9 @@ const SessionRow = ({
            >
              <ExternalLink size={12} />
            </button>
+          </TooltipTrigger>
+          <TooltipContent side="left">Open session</TooltipContent>
+        </Tooltip>
      </div>
    </div>
  );
--- a/src/renderer/components/team/dialogs/SendMessageDialog.tsx
+++ b/src/renderer/components/team/dialogs/SendMessageDialog.tsx
@ -19,6 +19,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@renderer/components/ui/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { getTeamColorSet } from '@renderer/constants/teamColors';
 import { useDraftPersistence } from '@renderer/hooks/useDraftPersistence';
 import { buildReplyBlock } from '@renderer/utils/agentMessageFormatting';
@ -180,6 +181,8 @@ export const SendMessageDialog = ({

          {quote ? (
            <div className="relative rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] p-2.5">
+              <Tooltip>
+                <TooltipTrigger asChild>
                  <button
                    type="button"
                    className="absolute right-1.5 top-1.5 rounded p-0.5 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
@ -187,6 +190,9 @@ export const SendMessageDialog = ({
                  >
                    <X size={12} />
                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="left">Remove quote</TooltipContent>
+              </Tooltip>
              <span className="mb-0.5 block text-[10px] font-medium text-[var(--color-text-muted)]">
                Replying to @{quote.from}
              </span>
--- a/src/renderer/components/team/dialogs/TaskCommentsSection.tsx
+++ b/src/renderer/components/team/dialogs/TaskCommentsSection.tsx
@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { MarkdownViewer } from '@renderer/components/chat/viewers/MarkdownViewer';
 import { ReplyQuoteBlock } from '@renderer/components/team/activity/ReplyQuoteBlock';
 import { MentionableTextarea } from '@renderer/components/ui/MentionableTextarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { useDraftPersistence } from '@renderer/hooks/useDraftPersistence';
 import { useMarkCommentsRead } from '@renderer/hooks/useMarkCommentsRead';
 import { useStore } from '@renderer/store';
@ -156,6 +157,8 @@ export const TaskCommentsSection = ({
              {replyTo.text}
            </div>
          </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
              <button
                type="button"
                className="shrink-0 rounded p-0.5 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface)] hover:text-[var(--color-text-secondary)]"
@ -163,6 +166,9 @@ export const TaskCommentsSection = ({
              >
                <X size={12} />
              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">Cancel reply</TooltipContent>
+          </Tooltip>
        </div>
      ) : null}

--- a/src/renderer/components/team/kanban/KanbanBoard.tsx
+++ b/src/renderer/components/team/kanban/KanbanBoard.tsx
@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';

 import { Button } from '@renderer/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { cn } from '@renderer/lib/utils';
 import { Columns3, LayoutGrid } from 'lucide-react';

@ -138,6 +139,8 @@ export const KanbanBoard = ({
          onFilterChange={onFilterChange}
        />
        <div className="inline-flex rounded-md border border-[var(--color-border)]">
+          <Tooltip>
+            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
@ -149,10 +152,14 @@ export const KanbanBoard = ({
                )}
                onClick={() => setViewMode('grid')}
                aria-label="Grid view"
-            title="Grid"
              >
                <LayoutGrid size={14} />
              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Grid view</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
@ -164,10 +171,12 @@ export const KanbanBoard = ({
                )}
                onClick={() => setViewMode('columns')}
                aria-label="Columns view"
-            title="Columns"
              >
                <Columns3 size={14} />
              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">Columns view</TooltipContent>
+          </Tooltip>
        </div>
      </div>

--- a/src/renderer/components/team/kanban/KanbanFilterPopover.tsx
+++ b/src/renderer/components/team/kanban/KanbanFilterPopover.tsx
@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Button } from '@renderer/components/ui/button';
 import { Checkbox } from '@renderer/components/ui/checkbox';
 import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip';
 import { Crown, Filter } from 'lucide-react';

 import type { Session } from '@renderer/types/data';
@ -57,13 +58,14 @@ export const KanbanFilterPopover = ({

  return (
    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
          <PopoverTrigger asChild>
            <Button
              variant="ghost"
              size="sm"
              className="relative h-7 px-2 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
              aria-label="Filter tasks"
-          title="Filter"
            >
              <Filter size={14} />
              {activeCount > 0 && (
@ -73,6 +75,9 @@ export const KanbanFilterPopover = ({
              )}
            </Button>
          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Filter tasks</TooltipContent>
+      </Tooltip>
      <PopoverContent align="end" className="w-72 p-0">
        {/* Session section */}
        <div className="border-b border-[var(--color-border)] p-3">
--- a/src/renderer/components/team/messages/MessagesFilterPopover.tsx
+++ b/src/renderer/components/team/messages/MessagesFilterPopover.tsx
@ -0,0 +1,171 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { Button } from '@renderer/components/ui/button';
+import { Checkbox } from '@renderer/components/ui/checkbox';
+import { Popover, PopoverContent, PopoverTrigger } from '@renderer/components/ui/popover';
+import { Filter } from 'lucide-react';
+
+import type { InboxMessage } from '@shared/types';
+
+export interface MessagesFilterState {
+  from: Set<string>;
+  to: Set<string>;
+}
+
+interface MessagesFilterPopoverProps {
+  filter: MessagesFilterState;
+  messages: InboxMessage[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onApply: (filter: MessagesFilterState) => void;
+}
+
+function collectFromOptions(messages: InboxMessage[]): string[] {
+  const set = new Set<string>();
+  for (const m of messages) {
+    if (m.from?.trim()) set.add(m.from.trim());
+  }
+  return Array.from(set).sort();
+}
+
+function collectToOptions(messages: InboxMessage[]): string[] {
+  const set = new Set<string>();
+  for (const m of messages) {
+    if (m.to?.trim()) set.add(m.to.trim());
+  }
+  return Array.from(set).sort();
+}
+
+export const MessagesFilterPopover = ({
+  filter,
+  messages,
+  open,
+  onOpenChange,
+  onApply,
+}: MessagesFilterPopoverProps): React.JSX.Element => {
+  const [draft, setDraft] = useState<MessagesFilterState>({ from: new Set(), to: new Set() });
+
+  useEffect(() => {
+    if (open) {
+      setDraft({
+        from: new Set(filter.from),
+        to: new Set(filter.to),
+      });
+    }
+  }, [open, filter.from, filter.to]);
+
+  const fromOptions = useMemo(() => collectFromOptions(messages), [messages]);
+  const toOptions = useMemo(() => collectToOptions(messages), [messages]);
+
+  const activeCount = (filter.from.size > 0 ? 1 : 0) + (filter.to.size > 0 ? 1 : 0);
+  const draftCount = (draft.from.size > 0 ? 1 : 0) + (draft.to.size > 0 ? 1 : 0);
+
+  const toggleFrom = (name: string): void => {
+    setDraft((prev) => {
+      const next = new Set(prev.from);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return { ...prev, from: next };
+    });
+  };
+
+  const toggleTo = (name: string): void => {
+    setDraft((prev) => {
+      const next = new Set(prev.to);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return { ...prev, to: next };
+    });
+  };
+
+  const handleSave = (): void => {
+    onApply(draft);
+    onOpenChange(false);
+  };
+
+  const handleReset = (): void => {
+    const empty = { from: new Set<string>(), to: new Set<string>() };
+    setDraft(empty);
+    onApply(empty);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="relative h-7 px-2 text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+          aria-label="Filter messages"
+          title="Filter"
+        >
+          <Filter size={14} />
+          {activeCount > 0 && (
+            <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-blue-500 text-[10px] font-medium text-white">
+              {activeCount}
+            </span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-72 p-0">
+        <div className="border-b border-[var(--color-border)] p-3">
+          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+            Кто писал
+          </p>
+          <div className="max-h-40 space-y-1 overflow-y-auto">
+            {fromOptions.length === 0 ? (
+              <p className="text-xs italic text-[var(--color-text-muted)]">Нет данных</p>
+            ) : (
+              fromOptions.map((name) => (
+                <label
+                  key={name}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
+                >
+                  <Checkbox
+                    checked={draft.from.has(name)}
+                    onCheckedChange={() => toggleFrom(name)}
+                  />
+                  {name}
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+        <div className="border-b border-[var(--color-border)] p-3">
+          <p className="mb-2 text-[11px] font-medium uppercase tracking-wider text-[var(--color-text-muted)]">
+            Кому писали
+          </p>
+          <div className="max-h-40 space-y-1 overflow-y-auto">
+            {toOptions.length === 0 ? (
+              <p className="text-xs italic text-[var(--color-text-muted)]">Нет данных</p>
+            ) : (
+              toOptions.map((name) => (
+                <label
+                  key={name}
+                  className="flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)]"
+                >
+                  <Checkbox checked={draft.to.has(name)} onCheckedChange={() => toggleTo(name)} />
+                  {name}
+                </label>
+              ))
+            )}
+          </div>
+        </div>
+        <div className="flex justify-between gap-2 p-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
+            disabled={draftCount === 0}
+            onClick={handleReset}
+          >
+            Сбросить
+          </Button>
+          <Button size="sm" className="h-7 px-3 text-[11px]" onClick={handleSave}>
+            Сохранить
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
--- a/src/renderer/components/ui/tooltip.tsx
+++ b/src/renderer/components/ui/tooltip.tsx
@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-props-no-spreading -- Standard Radix/shadcn pattern */
+import * as React from 'react';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '@renderer/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipPortal = TooltipPrimitive.Portal;
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 max-w-[var(--radix-tooltip-content-available-width)] rounded-md border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-text)] shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger };
+/* eslint-enable react/jsx-props-no-spreading */