Add TipContent props

src/pages/AddressPage/tabs/events/Events.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../../../api/client";
 import styled from "styled-components";
 import { DisplaySignature, parseSuggestedEvent } from "../../../../web3/parseByteCode";
+import { TipContent } from "../../../../components/ui";
 
 const TopicsContainer = styled.div`
   text-align: left;
@@ -66,12 +67,15 @@ const CenteredContainer = styled.div`
 function TxsHashColumn (props: { log: LogWithSignature }) {
   const { log } = props
   return <div style={{ width: '140px' }}>
-    <Tip content={'Txn Hash'}>
+    <Tip
+      dropProps={{ align: { bottom: "top" }}}
+      content={<TipContent showArrow={true} message={'Txn Hash'} />}
+    >
       <Link to={`/tx/${log.transactionHash}`}>
         <LinkText>{log.transactionHash}</LinkText>
       </Link>
     </Tip>
-    <Tip content={'Block number'}>
+    <Tip dropProps={{ align: { bottom: "top" }}} content={<TipContent showArrow={true} message={'Block number'} />}>
       <div style={{ display: 'flex', marginTop: '4px' }}>
         #&nbsp;
         <Link to={`/block/${log.blockNumber}`} style={{ display: 'inline-block' }}>
@@ -80,7 +84,10 @@ function TxsHashColumn (props: { log: LogWithSignature }) {
       </div>
     </Tip>
     {log.timestamp &&
-      <Tip content={dayjs(log.timestamp).format('MMM-DD-YYYY hh:mm:ss a') }>
+      <Tip
+        dropProps={{ align: { bottom: "top" }}}
+        content={<TipContent showArrow={true} message={dayjs(log.timestamp).format('MMM-DD-YYYY hh:mm:ss a')} />}
+      >
         <div style={{ marginTop: '4px' }}>{dayjs(log.timestamp).fromNow()}</div>
       </Tip>
     }
@@ -92,7 +99,7 @@ function TxMethod (props: { log: LogWithSignature }) {
 
   return <div style={{ width: '140px' }}>
     <Text size="12px">
-      <Tip content={'MethodID'}>
+      <Tip dropProps={{ align: { bottom: "top" }}} content={<TipContent showArrow={true} message={'MethodID'} />}>
         <NeutralMarker background={"backgroundBack"} width={'100px'}>
           <TextEllipsis>{props.log.input.slice(0, 10)}</TextEllipsis>
         </NeutralMarker>

src/pages/ExportData/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { StatusCritical } from "grommet-icons";
-import { Address, BaseContainer, BasePage, Button } from "src/components/ui";
+import { Address, BaseContainer, BasePage, Button, TipContent } from "src/components/ui";
 import { Heading, DateInput, Box, Spinner, Tip, Text } from "grommet";
 import styled from "styled-components";
 import useQuery from "../../hooks/useQuery";
@@ -118,7 +118,7 @@ export const ExportData = () => {
       </Box>
       <FlexWrapper>
         <InputContainer>
-          <Tip content={<span>Select start date</span>}>
+          <Tip dropProps={{ align: { bottom: "top" }}} content={<TipContent showArrow={true} message={'Select start date'} />}>
           <DateInput
             {...dateInputProps}
             value={dayjs(dateFrom).toISOString()}
@@ -128,7 +128,7 @@ export const ExportData = () => {
         </InputContainer>
         <div>to</div>
         <InputContainer>
-          <Tip content={<span>Select end date</span>}>
+          <Tip dropProps={{ align: { bottom: "top" }}} content={<TipContent showArrow={true} message={'Select end date'} />}>
             <DateInput
               {...dateInputProps}
               value={dayjs(dateTo).toISOString()}

src/pages/tools/CheckHRC/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Box, Heading, Select, Spinner, Text, TextArea, TextInput, Tip } from "grommet";
 import { Alert, StatusGood } from "grommet-icons";
-import { BaseContainer, BasePage } from "../../../components/ui";
+import { BaseContainer, BasePage, TipContent } from "../../../components/ui";
 import useQuery from "../../../hooks/useQuery";
 import { getContractsByField } from "../../../api/client";
 import styled from "styled-components";
@@ -230,8 +230,18 @@ export function CheckHRC() {
             {(!isContractLoading && contractAddress) &&
               <Box justify="center" align="center" margin={'24px 0 0 24px'}>
                 {isAllEventsMatched
-                  ? <Tip content={'All events found'}><StatusGood size="medium" color={'successText'} /></Tip>
-                  : <Tip content={'Some events missing'}><Alert size="medium" color={'minorText'} /></Tip>}
+                  ? <Tip
+                    dropProps={{ align: { bottom: "top" }}}
+                    content={<TipContent showArrow={true} message={'All events found'} />}
+                  >
+                    <StatusGood size="medium" color={'successText'} />
+                </Tip>
+                  : <Tip
+                    dropProps={{ align: { bottom: "top" }}}
+                    content={<TipContent showArrow={true} message={'Some events missing'} />}
+                  >
+                    <Alert size="medium" color={'minorText'} />
+                  </Tip>}
               </Box>
             }
         </Box>