changed tooltip content

Author: agnieszkajarosikloj

src/modules/core/components/Popover/Tooltip.tsx

@@ -29,6 +29,7 @@ interface Props {
 
   /** Set the open state from outside */
   isOpen?: boolean;
+  interactive?: boolean;
 }
 
 const Tooltip = ({
@@ -39,6 +40,7 @@ const Tooltip = ({
   showArrow = true,
   trigger = 'hover',
   isOpen,
+  interactive = false,
 }: Props) => {
   const {
     getArrowProps,
@@ -52,6 +54,8 @@ const Tooltip = ({
       placement,
       trigger: content ? trigger : null,
       visible: isOpen,
+      delayHide: interactive ? 200 : 0,
+      interactive,
     },
     popperOptions,
   );

src/modules/core/components/QuestionMarkTooltip/QuestionMarkTooltip.tsx

@@ -4,20 +4,21 @@ import { MessageDescriptor, FormattedMessage } from 'react-intl';
 
 import Icon from '~core/Icon';
 import { Tooltip } from '~core/Popover';
-import { SimpleMessageValues } from '~types/index';
+import { UniversalMessageValues } from '~types/index';
 
 const displayName = 'QuestionMarkTooltip';
 
 interface Props {
   tooltipText: string | MessageDescriptor;
-  tooltipTextValues?: SimpleMessageValues;
+  tooltipTextValues?: UniversalMessageValues;
   /** Options to pass to the underlying PopperJS element. See here for more: https://popper.js.org/docs/v2/constructors/#options. */
   tooltipPopperOptions?: PopperOptions;
   className?: string;
   tooltipClassName?: string;
   iconTitle?: string;
   showArrow?: boolean;
   invertedIcon?: boolean;
+  interactive?: boolean;
 }
 
 const QuestionMarkTooltip = ({
@@ -39,6 +40,7 @@ const QuestionMarkTooltip = ({
   className,
   showArrow,
   invertedIcon,
+  interactive,
 }: Props) => {
   return (
     <>
@@ -55,6 +57,7 @@ const QuestionMarkTooltip = ({
         trigger="hover"
         showArrow={showArrow}
         popperOptions={tooltipPopperOptions}
+        interactive={interactive}
       >
         <div className={className}>
           <Icon

src/modules/dashboard/components/Incorporation/IncorporationForm/LockedProtectors/LockedProtectors.tsx

@@ -7,6 +7,7 @@ import { ValuesType } from '~pages/IncorporationPage/types';
 import UserAvatar from '~core/UserAvatar';
 import UserMention from '~core/UserMention';
 import Tag from '~core/Tag';
+import Link from '~core/Link';
 
 import { SignOption, VerificationStatus } from '../constants';
 
@@ -19,7 +20,7 @@ export const MSG = defineMessages({
   },
   protectorsTooltip: {
     id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.protectorsTooltip`,
-    defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO and handle legal the required administration. Learn more`,
+    defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO for legal matters and any required legal administration. <a>Learn more.</a>`,
   },
   unverified: {
     id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.unverified`,
@@ -39,7 +40,7 @@ export const MSG = defineMessages({
   },
   mainContactTooltip: {
     id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.mainContactTooltip`,
-    defaultMessage: `The main contact is required during the incorporation process and is also required to use their delivery address details for the registration.`,
+    defaultMessage: `The main contact is required during the incorporation process for administration purposes.`,
   },
   signOptionTooltip: {
     id: `dashboard.Incorporation.IncorporationForm.LockedProtectors.signOptionTooltip`,
@@ -76,7 +77,13 @@ const LockedProtectors = ({ formValues }: Props) => {
             <div className={styles.label}>
               <FormattedMessage {...MSG.protectors} />
             </div>
-            <QuestionMarkTooltip tooltipText={MSG.protectorsTooltip} />
+            <QuestionMarkTooltip
+              tooltipText={MSG.protectorsTooltip}
+              tooltipTextValues={{
+                a: (chunks) => <Link to="/">{chunks}</Link>, // link is a mock, add redirection to the correct page
+              }}
+              interactive
+            />
           </div>
         </div>
       </FormSection>

src/modules/dashboard/components/Incorporation/IncorporationForm/Protectors/Protectors.tsx

@@ -14,6 +14,7 @@ import { filterUserSelection } from '~core/SingleUserPicker';
 import { supRenderAvatar } from '~dashboard/ExpenditurePage/Recipient/Recipient';
 import { Protector } from '~pages/IncorporationPage/types';
 import Button from '~core/Button';
+import Link from '~core/Link';
 
 import Radio from '../Radio';
 import { SignOption } from '../types';
@@ -28,7 +29,7 @@ export const MSG = defineMessages({
   },
   protectorsTooltip: {
     id: `dashboard.Incorporation.IncorporationForm.Protectors.protectorsTooltip`,
-    defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO and handle legal the required administration. Learn more`,
+    defaultMessage: `A Protector's role in a DAO legal corporation is to ratify the decisions of the DAO. Their purpose is to act on behalf of the DAO for legal matters and any required legal administration. <a>Learn more.</a>`,
   },
   deleteIconTitle: {
     id: `dashboard.Incorporation.IncorporationForm.Protectors.deleteIconTitle`,
@@ -56,7 +57,7 @@ export const MSG = defineMessages({
   },
   mainContactTooltip: {
     id: `dashboard.Incorporation.IncorporationForm.Protectors.mainContactTooltip`,
-    defaultMessage: `The main contact is required during the incorporation process and is also required to use their delivery address details for the registration.`,
+    defaultMessage: `The main contact is required during the incorporation process for administration purposes.`,
   },
 });
 
@@ -130,7 +131,13 @@ const Protectors = ({ colony, sidebarRef }: Props) => {
                 }}
               />
             </div>
-            <QuestionMarkTooltip tooltipText={MSG.protectorsTooltip} />
+            <QuestionMarkTooltip
+              tooltipText={MSG.protectorsTooltip}
+              tooltipTextValues={{
+                a: (chunks) => <Link to="/">{chunks}</Link>, // link is a mock, add redirection to the correct page
+              }}
+              interactive
+            />
           </div>
           <FieldArray
             name="protectors"