diff --git a/packages/ui/src/common/components/Tooltip/Tooltip.tsx b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
index 7e8ebe1c5c..cc6c7aa0db 100644
--- a/packages/ui/src/common/components/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
@@ -33,6 +33,7 @@ export interface TooltipPopupProps {
   forBig?: boolean
   hideOnComponentLeave?: boolean
   boundaryClassName?: string
+  placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
 }
 
 export interface DarkTooltipInnerItemProps {
@@ -54,6 +55,7 @@ export const Tooltip = ({
   offset,
   hideOnComponentLeave,
   boundaryClassName,
+  placement = 'bottom-start',
 }: TooltipProps) => {
   const [isTooltipActive, setTooltipActive] = useState(tooltipOpen)
   const [referenceElementRef, setReferenceElementRef] = useState<HTMLElement | null>(null)
@@ -61,7 +63,7 @@ export const Tooltip = ({
   const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
 
   const { styles, attributes } = usePopper(referenceElementRef, popperElementRef, {
-    placement: 'bottom-start',
+    placement,
     modifiers: [
       {
         name: 'offset',
diff --git a/packages/ui/src/common/components/buttons/TransactionButton.tsx b/packages/ui/src/common/components/buttons/TransactionButton.tsx
index 31477b7bf3..dd54e6671b 100644
--- a/packages/ui/src/common/components/buttons/TransactionButton.tsx
+++ b/packages/ui/src/common/components/buttons/TransactionButton.tsx
@@ -9,15 +9,24 @@ import { ButtonGhost, ButtonPrimary, ButtonProps, ButtonSecondary } from '.'
 
 interface WrapperProps {
   children: ReactNode
+  tooltip: { [key: string]: string }
 }
 
-export const TransactionButtonWrapper = ({ children }: WrapperProps) => {
+export const TransactionButtonWrapper = ({ children, tooltip }: WrapperProps) => {
   const { isTransactionPending } = useTransactionStatus()
 
   if (isTransactionPending) {
     return <Tooltip tooltipText="Please wait until the current transaction is over">{children}</Tooltip>
   }
 
+  if (tooltip) {
+    return (
+      <Tooltip placement="bottom-end" {...tooltip}>
+        {children}
+      </Tooltip>
+    )
+  }
+
   return <>{children}</>
 }
 
@@ -25,6 +34,7 @@ type StyleOption = 'primary' | 'ghost' | 'secondary'
 
 interface TransactionButtonProps extends ButtonProps {
   style: StyleOption
+  tooltip: { [key: string]: string }
 }
 
 export const TransactionButton = (props: TransactionButtonProps) => {
@@ -33,7 +43,7 @@ export const TransactionButton = (props: TransactionButtonProps) => {
   const Button = buttonTypes[props.style]
 
   return (
-    <TransactionButtonWrapper>
+    <TransactionButtonWrapper tooltip={props.tooltip}>
       <Button {...props} disabled={isTransactionPending || props.disabled} />
     </TransactionButtonWrapper>
   )
diff --git a/packages/ui/src/proposals/components/AddProposalButton.tsx b/packages/ui/src/proposals/components/AddProposalButton.tsx
index 00057bef7f..f519066e1e 100644
--- a/packages/ui/src/proposals/components/AddProposalButton.tsx
+++ b/packages/ui/src/proposals/components/AddProposalButton.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import { useApi } from '@/api/hooks/useApi'
 import { TransactionButton } from '@/common/components/buttons/TransactionButton'
@@ -8,27 +8,39 @@ import { useModal } from '@/common/hooks/useModal'
 import { AddNewProposalModalCall } from '@/proposals/modals/AddNewProposal'
 
 export const AddProposalButton = () => {
+  const { api } = useApi()
   const { showModal } = useModal()
-  const addNewProposalModal = useCallback(() => {
-    showModal<AddNewProposalModalCall>({
-      modal: 'AddNewProposalModal',
-    })
-  }, [])
+  const addProposalModal = useCallback(() => showModal<AddNewProposalModalCall>({ modal: 'AddNewProposalModal' }), [])
 
-  const { api } = useApi()
-  const maxProposals = api?.consts.proposalsEngine.maxActiveProposalLimit
-  const currentProposals = useFirstObservableValue(
-    () => api?.query.proposalsEngine.activeProposalCount(),
-    [api?.isConnected]
-  )
-  const areProposalSlotsAvailable = api && maxProposals && currentProposals?.lt(maxProposals)
+  const maxProposals = useMemo(() => api?.consts.proposalsEngine.maxActiveProposalLimit, [api?.isConnected])
+  const proposals = useFirstObservableValue(() => api?.query.proposalsEngine.activeProposalCount(), [api?.isConnected])
+  const availableSlots = useMemo(() => Number(maxProposals) - Number(proposals), [proposals, maxProposals])
+
+  const tooltipProps = useMemo(() => {
+    if (!api?.isConnected) return { tooltipText: 'Connecting to api' }
+    if (!api?.isConnected || availableSlots > 0) {
+      return {
+        tooltipText: 'Use the proposal engine to suggest a change to the Council.',
+        tooltipLinkText: 'Learn about the Proposal System',
+        tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system',
+      }
+    } else {
+      return {
+        tooltipTitle: 'Max active proposals limit reached',
+        tooltipText: `The creation of proposals is currently disabled because the number of deciding or gracing proposals reached the limit of ${maxProposals}.`,
+        tooltipLinkText: 'Proposal System Constants',
+        tooltipLinkURL: 'https://joystream.gitbook.io/testnet-workspace/system/proposal-system#constants',
+      }
+    }
+  }, [api?.isConnected, availableSlots])
 
   return (
     <TransactionButton
       style="primary"
       size="medium"
-      onClick={addNewProposalModal}
-      disabled={!areProposalSlotsAvailable}
+      tooltip={tooltipProps}
+      onClick={addProposalModal}
+      disabled={!availableSlots}
     >
       <PlusIcon />
       Add new proposal