Display popover in ad

app/soapbox/features/ads/components/ad.tsx

@@ -1,17 +1,13 @@
-import React, { useEffect } from 'react';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import React, { useState, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
 
-import { Stack, HStack, Card, Tooltip, Avatar, Text, Icon } from 'soapbox/components/ui';
+import { Stack, HStack, Card, Avatar, Text, Icon } from 'soapbox/components/ui';
 import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import StatusCard from 'soapbox/features/status/components/card';
 import { useAppSelector } from 'soapbox/hooks';
 
 import type { Card as CardEntity } from 'soapbox/types/entities';
 
-const messages = defineMessages({
-  tooltip: { id: 'sponsored.tooltip', defaultMessage: '{siteTitle} displays ads to help fund our service.' },
-});
-
 interface IAd {
   /** Embedded ad data in Card format (almost like OEmbed). */
   card: CardEntity,
@@ -21,9 +17,10 @@ interface IAd {
 
 /** Displays an ad in sponsored post format. */
 const Ad: React.FC<IAd> = ({ card, impression }) => {
-  const intl = useIntl();
   const instance = useAppSelector(state => state.instance);
 
+  const [showInfo, setShowInfo] = useState(false);
+
   // Fetch the impression URL (if any) upon displaying the ad.
   // It's common for ad providers to provide this.
   useEffect(() => {
@@ -32,46 +29,72 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
     }
   }, [impression]);
 
+  /** Toggle the info box on click. */
+  const handleInfoButtonClick: React.MouseEventHandler = () => {
+    setShowInfo(!showInfo);
+  };
+
   return (
-    <Card className='p-5' variant='rounded'>
-      <Stack space={4}>
-        <HStack alignItems='center' space={3}>
-          <Avatar src={instance.thumbnail} size={42} />
+    <div className='relative'>
+      <Card className='p-5' variant='rounded'>
+        <Stack space={4}>
+          <HStack alignItems='center' space={3}>
+            <Avatar src={instance.thumbnail} size={42} />
 
-          <Stack grow>
-            <HStack space={1}>
-              <Text size='sm' weight='semibold' truncate>
-                {instance.title}
-              </Text>
-
-              <Icon
-                className='w-5 h-5 stroke-accent-500'
-                src={require('@tabler/icons/timeline.svg')}
-              />
-            </HStack>
-
-            <Stack>
-              <HStack alignItems='center' space={1}>
-                <Text theme='muted' size='sm' truncate>
-                  <FormattedMessage id='sponsored.subtitle' defaultMessage='Sponsored post' />
+            <Stack grow>
+              <HStack space={1}>
+                <Text size='sm' weight='semibold' truncate>
+                  {instance.title}
                 </Text>
-              </HStack>
-            </Stack>
-          </Stack>
 
-          <Stack justifyContent='center'>
-            <Tooltip text={intl.formatMessage(messages.tooltip, { siteTitle: instance.title })}>
+                <Icon
+                  className='w-5 h-5 stroke-accent-500'
+                  src={require('@tabler/icons/timeline.svg')}
+                />
+              </HStack>
+
+              <Stack>
+                <HStack alignItems='center' space={1}>
+                  <Text theme='muted' size='sm' truncate>
+                    <FormattedMessage id='sponsored.subtitle' defaultMessage='Sponsored post' />
+                  </Text>
+                </HStack>
+              </Stack>
+            </Stack>
+
+            <Stack justifyContent='center'>
               <IconButton
                 iconClassName='stroke-gray-600 w-6 h-6'
                 src={require('@tabler/icons/info-circle.svg')}
+                onClick={handleInfoButtonClick}
               />
-            </Tooltip>
-          </Stack>
-        </HStack>
+            </Stack>
+          </HStack>
 
-        <StatusCard card={card} onOpenMedia={() => {}} horizontal />
-      </Stack>
-    </Card>
+          <StatusCard card={card} onOpenMedia={() => {}} horizontal />
+        </Stack>
+      </Card>
+
+      {showInfo && (
+        <div className='absolute top-5 right-5 max-w-xs'>
+          <Card variant='rounded'>
+            <Stack space={2}>
+              <Text size='sm' weight='bold'>
+                <FormattedMessage id='sponsored.info.title' defaultMessage='Why am I seeing this ad?' />
+              </Text>
+
+              <Text size='sm' theme='muted'>
+                <FormattedMessage
+                  id='sponsored.info.message'
+                  defaultMessage='{siteTitle} displays ads to help fund our service.'
+                  values={{ siteTitle: instance.title }}
+                />
+              </Text>
+            </Stack>
+          </Card>
+        </div>
+      )}
+    </div>
   );
 };