tooltip for anon

Author: Aniket-Engg

apps/remix-ide/src/app/tabs/locales/en/remixApp.json

@@ -19,6 +19,7 @@
 
   "remixApp.mpOp1Title": "Matomo Anonymous Analytics (Necessary)",
   "remixApp.mpOp1Details": "Our use of anonymous analytics data helps us improve your experience by identifying bug and important UX improvements. This data can also be used in overall statistics on Remix use in the wider Web3 ecosystem",
+  "remixApp.mpOp1Tooltip": "This is a necessary selection for a better experience of Remix IDE",
 
   "remixApp.mpOp2Title": "Matomo Performance Analytics",
   "remixApp.mpOp2Details": "Remix believes your privacy is of primary importance. Your help in making Remix the best possible open source public good toolset is also very important. Approval of performance analytics tracking greatly helps us refine and improve the toolset. Rest assured, we will never share this data with any third parties.",

libs/remix-ui/app/src/lib/remix-app/components/modals/managePreferences.tsx

@@ -1,6 +1,8 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDialogDispatchers } from '../../context/provider'
+import { CustomTooltip } from "@remix-ui/helper"
+import { useIntl } from 'react-intl';
 declare global {
   interface Window {
     _paq: any
@@ -14,6 +16,7 @@ interface ManagePreferencesDialogProps {
 const ManagePreferencesSwitcher = (prop: {
   setParentState: (state: any) => void
 }) => {
+  const intl = useIntl()
   const [remixAISwitch, setRemixAISwitch] = useState(true)
   const [matPerfSwitch, setMatPerfSwitch] = useState(true)
 
@@ -33,14 +36,21 @@ const ManagePreferencesSwitcher = (prop: {
             <p className='form-check-label text-secondary'><FormattedMessage id="remixApp.mpOp1Details" /></p>
           </div>
           <div>
-            <button
-              data-id="matomoAnonAnalyticsSwitch"
-              id='matomoAnonAnalyticsSwitch'
-              className="btn text-ai"
-              disabled
+            <CustomTooltip
+            placement={"auto"}
+            tooltipId="matomoAnonAnalyticsTooltip"
+            tooltipClasses="text-nowrap"
+            tooltipText={<FormattedMessage id="remixApp.mpOp1Tooltip" />}
             >
-              <i className="fas fa-toggle-on fa-2xl"></i>
-            </button>
+              <button
+                data-id="matomoAnonAnalyticsSwitch"
+                id='matomoAnonAnalyticsSwitch'
+                className="btn text-ai"
+                disabled
+              >
+                <i className="fas fa-toggle-on fa-2xl"></i>
+              </button>
+            </CustomTooltip>
           </div>
         </div>
         <div data-id="matomoPerfAnalytics" className='justify-content-between d-flex'>