remove usage of tooltip from insomnia-components

packages/insomnia/src/ui/components/buttons/settings-button.tsx

@@ -1,11 +1,12 @@
-import { CircleButton, SvgIcon, Tooltip } from 'insomnia-components';
+import { CircleButton, SvgIcon } from 'insomnia-components';
 import React, { FunctionComponent } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { selectSettings } from '../../redux/selectors';
 import { Hotkey } from '../hotkey';
 import { showSettingsModal } from '../modals/settings-modal';
+import { Tooltip } from '../tooltip';
 
 const Wrapper = styled.div({
   marginLeft: 'var(--padding-md)',

packages/insomnia/src/ui/components/dropdowns/account-dropdown/account-dropdown.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { CircleButton, SvgIcon, Tooltip } from 'insomnia-components';
+import { CircleButton, SvgIcon } from 'insomnia-components';
 import React, { Fragment, FunctionComponent } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -12,6 +12,7 @@ import { DropdownItem } from '../../base/dropdown/dropdown-item';
 import { Link } from '../../base/link';
 import { PromptButton } from '../../base/prompt-button';
 import { showLoginModal } from '../../modals/login-modal';
+import { Tooltip } from '../../tooltip';
 
 const Wrapper = styled.div({
   display: 'flex',

packages/insomnia/src/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown-button.tsx

@@ -1,8 +1,9 @@
-import { Button, ButtonProps, Tooltip } from 'insomnia-components';
+import { Button, ButtonProps } from 'insomnia-components';
 import React, { FunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { getGrpcPathSegments, getShortGrpcPath } from '../../../../common/grpc-paths';
+import { Tooltip } from '../../tooltip';
 
 const FlexSpaceBetween = styled.span`
   width: 100%;

packages/insomnia/src/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, DropdownDivider, DropdownItem, Tooltip } from 'insomnia-components';
+import { Dropdown, DropdownDivider, DropdownItem } from 'insomnia-components';
 import React, { Fragment, FunctionComponent, useMemo } from 'react';
 import styled from 'styled-components';
 
@@ -10,6 +10,7 @@ import {
 } from '../../../../common/grpc-paths';
 import type { GrpcMethodDefinition } from '../../../../network/grpc/method';
 import { GrpcMethodTag } from '../../tags/grpc-method-tag';
+import { Tooltip } from '../../tooltip';
 import { GrpcMethodDropdownButton } from './grpc-method-dropdown-button';
 
 interface Props {

packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx

@@ -1,4 +1,4 @@
-import { Dropdown, DropdownDivider, DropdownItem, SvgIcon, SvgIconProps, Tooltip } from 'insomnia-components';
+import { Dropdown, DropdownDivider, DropdownItem, SvgIcon, SvgIconProps } from 'insomnia-components';
 import { partition } from 'ramda';
 import React, { FC, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,6 +13,7 @@ import { createProject } from '../../redux/modules/project';
 import { selectActiveProject, selectProjects } from '../../redux/selectors';
 import { showModal } from '../modals';
 import ProjectSettingsModal from '../modals/project-settings-modal';
+import { Tooltip } from '../tooltip';
 import { svgPlacementHack, tooltipIconPlacementHack } from './dropdown-placement-hacks';
 
 const Checkmark = styled(SvgIcon)({

packages/insomnia/src/ui/components/dropdowns/remote-workspaces-dropdown.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown, DropdownDivider, DropdownItem, Tooltip } from 'insomnia-components';
+import { Button, Dropdown, DropdownDivider, DropdownItem } from 'insomnia-components';
 import React, { FC } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
@@ -10,6 +10,7 @@ import { VCS } from '../../../sync/vcs/vcs';
 import { useRemoteWorkspaces } from '../../hooks/workspace';
 import { selectActiveProject } from '../../redux/selectors';
 import { HelpTooltip } from '../help-tooltip';
+import { Tooltip } from '../tooltip';
 
 interface Props {
   vcs?: VCS | null;

packages/insomnia/src/ui/components/settings/general.tsx

@@ -1,5 +1,4 @@
 import { EnvironmentHighlightColorStyle, HttpVersion, HttpVersions, UpdateChannel } from 'insomnia-common';
-import { Tooltip } from 'insomnia-components';
 import React, { FC, Fragment, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 
@@ -21,6 +20,7 @@ import { selectSettings, selectStats } from '../../redux/selectors';
 import { Link } from '../base/link';
 import { CheckForUpdatesButton } from '../check-for-updates-button';
 import { HelpTooltip } from '../help-tooltip';
+import { Tooltip } from '../tooltip';
 import { BooleanSetting } from './boolean-setting';
 import { EnumSetting } from './enum-setting';
 import { MaskedSetting } from './masked-setting';

packages/insomnia/src/ui/components/tags/grpc-method-tag.tsx

@@ -1,9 +1,9 @@
-import { Tooltip } from 'insomnia-components';
 import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 
 import type { GrpcMethodType } from '../../../network/grpc/method';
 import { GrpcMethodTypeAcronym, GrpcMethodTypeName } from '../../../network/grpc/method';
+import { Tooltip } from '../tooltip';
 
 interface Props {
   methodType: GrpcMethodType;

packages/insomnia/src/ui/components/tooltip.tsx

@@ -1,6 +1,5 @@
 import classnames from 'classnames';
 import React, {
-  isValidElement,
   ReactNode,
 } from 'react';
 import {
@@ -23,8 +22,8 @@ interface Props {
 }
 
 export const Tooltip = (props: Props) => {
-  const { children, message, className, selectable, wide, delay, ...rest } = props;
-  const state = useTooltipTriggerState({ ...props, delay });
+  const { children, message, className, selectable, wide, delay, position } = props;
+  const state = useTooltipTriggerState({ delay });
   const triggerRef = React.useRef(null);
   const overlayRef = React.useRef(null);
   const trigger = useTooltipTrigger(props, state, triggerRef);
@@ -33,7 +32,7 @@ export const Tooltip = (props: Props) => {
   const { overlayProps: positionProps } = useOverlayPosition({
     targetRef: triggerRef,
     overlayRef,
-    placement: 'top',
+    placement: position,
     offset: 5,
     isOpen: state.isOpen,
   });
@@ -50,23 +49,20 @@ export const Tooltip = (props: Props) => {
       ref={triggerRef}
       className={tooltipClasses}
       style={{ position: 'relative' }}
+      {...trigger.triggerProps}
     >
+      {children}
       {state.isOpen && (
         <OverlayContainer>
           <div
             ref={overlayRef}
-            {...mergeProps(rest, tooltipProps, positionProps)}
+            {...mergeProps(tooltipProps, positionProps)}
             className={bubbleClasses}
           >
             {message}
           </div>
         </OverlayContainer>
       )}
-      {isValidElement(children) &&
-        React.cloneElement(children, {
-          ...trigger.triggerProps,
-          ...children.props,
-        })}
     </div>
   );
 };