diff --git a/src/domains/helpers/EditDomainRedirectsModal.tsx b/src/domains/helpers/EditDomainRedirectsModal.tsx
index a74b9c4a..568503a5 100644
--- a/src/domains/helpers/EditDomainRedirectsModal.tsx
+++ b/src/domains/helpers/EditDomainRedirectsModal.tsx
@@ -1,10 +1,9 @@
import { FC, useState } from 'react';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader, UncontrolledTooltip } from 'reactstrap';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
import { FormGroupContainer } from '../../utils/FormGroupContainer';
import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
+import { InfoTooltip } from '../../utils/InfoTooltip';
interface EditDomainRedirectsModalProps {
domain: ShlinkDomain;
@@ -13,13 +12,6 @@ interface EditDomainRedirectsModalProps {
editDomainRedirects: (domain: string, redirects: Partial) => Promise;
}
-const InfoTooltip: FC<{ id: string }> = ({ id, children }) => (
- <>
-
- {children}
- >
-);
-
const FormGroup: FC<{ value: string; onChange: (newValue: string) => void; isLast?: boolean }> = (
{ value, onChange, isLast, children },
) => (
@@ -50,25 +42,23 @@ export const EditDomainRedirectsModal: FC = (
return (
);
diff --git a/src/utils/InfoTooltip.tsx b/src/utils/InfoTooltip.tsx
new file mode 100644
index 00000000..f204fd14
--- /dev/null
+++ b/src/utils/InfoTooltip.tsx
@@ -0,0 +1,28 @@
+import { FC, useRef } from 'react';
+import * as Popper from 'popper.js';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { UncontrolledTooltip } from 'reactstrap';
+
+interface InfoTooltipProps {
+ className?: string;
+ placement: Popper.Placement;
+}
+
+export const InfoTooltip: FC = ({ className = '', placement, children }) => {
+ const ref = useRef();
+
+ return (
+ <>
+ {
+ ref.current = el;
+ }}
+ >
+
+
+ ref.current) as any} placement={placement}>{children}
+ >
+ );
+};
diff --git a/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx b/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx
index 76df7496..d8889b41 100644
--- a/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx
+++ b/test/short-urls/helpers/ShortUrlFormCheckboxGroup.test.tsx
@@ -1,6 +1,7 @@
import { shallow } from 'enzyme';
import { ShortUrlFormCheckboxGroup } from '../../../src/short-urls/helpers/ShortUrlFormCheckboxGroup';
import Checkbox from '../../../src/utils/Checkbox';
+import { InfoTooltip } from '../../../src/utils/InfoTooltip';
describe('', () => {
test.each([
@@ -11,6 +12,6 @@ describe('', () => {
const checkbox = wrapper.find(Checkbox);
expect(checkbox.prop('className')).toEqual(expectedClassName);
- expect(wrapper.find('InfoTooltip')).toHaveLength(expectedAmountOfTooltips);
+ expect(wrapper.find(InfoTooltip)).toHaveLength(expectedAmountOfTooltips);
});
});