feature/keyword-actions-ui

src/components/DashboardGrid.tsx

@@ -476,13 +476,11 @@ export default function DashboardGrid() {
                                 }
                             }}
                         >
-                            {/* <Info size={16} className="text-gray-800 cursor-pointer" /> */}
-
                             <img src={InfoBadge} alt="Info" className="w-4 h-4 text-gray-800 cursor-pointer" />
                             {isHovered && (
-                                <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-72 bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
+                                <div className="absolute bottom-[150%] left-1/2 -translate-x-1/2 mt-2 px-4 py-2 w-fit whitespace-nowrap bg-gray-800 text-white text-sm rounded-lg shadow-lg z-50 transition-opacity duration-300 pointer-events-none opacity-100">
                                     {/* Tooltip triangle */}
-                                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-b-gray-800"></div>
+                                    <div className="absolute -bottom-[40%] left-1/2 -translate-x-1/2 w-0 h-0 border-8 border-transparent border-t-gray-800"></div>
                                     {tooltipText}
                                 </div>
                             )}
@@ -585,7 +583,7 @@ export default function DashboardGrid() {
                                                     <div className="absolute top-8 -right-10 w-48 bg-[#0CAA75] text-white font-bold py-2 text-center shadow-lg transform rotate-45">
                                                         <div className="flex items-center justify-center gap-2 text-xs whitespace-nowrap px-8">
                                                             <svg xmlns="http://www.w3.org/2000/svg" width="15" height="11" viewBox="0 0 15 11" fill="none">
-                                                                <path d="M6.45122 0.948562L9.85703 1.3343C12.0586 1.58457 13.1594 1.70876 13.3043 2.33535C13.4491 2.96195 12.5008 3.50763 10.6088 4.59994L10.43 4.70343C9.7479 5.09764 9.40638 5.29428 9.31888 5.6358L9.31417 5.65367C9.23326 5.99802 9.43836 6.35365 9.84857 7.06304C10.5871 8.34164 10.9569 8.98046 10.6934 9.42077L10.6793 9.44241C10.4027 9.87331 9.68957 9.7924 8.2595 9.63058L4.85462 9.2439C2.65307 8.99552 1.55323 8.87039 1.40834 8.24379C1.26345 7.6172 2.21088 7.07057 4.10289 5.97826L4.28165 5.87477C4.96376 5.48244 5.30434 5.28487 5.39372 4.94334L5.39842 4.92547C5.47839 4.58206 5.27329 4.22643 4.86403 3.5161C4.12547 2.2375 3.75573 1.59868 4.01916 1.15837L4.03327 1.13673C4.308 0.705828 5.02303 0.786739 6.45122 0.948562Z" stroke="white" stroke-width="1.625" />
+                                                                <path d="M6.45122 0.948562L9.85703 1.3343C12.0586 1.58457 13.1594 1.70876 13.3043 2.33535C13.4491 2.96195 12.5008 3.50763 10.6088 4.59994L10.43 4.70343C9.7479 5.09764 9.40638 5.29428 9.31888 5.6358L9.31417 5.65367C9.23326 5.99802 9.43836 6.35365 9.84857 7.06304C10.5871 8.34164 10.9569 8.98046 10.6934 9.42077L10.6793 9.44241C10.4027 9.87331 9.68957 9.7924 8.2595 9.63058L4.85462 9.2439C2.65307 8.99552 1.55323 8.87039 1.40834 8.24379C1.26345 7.6172 2.21088 7.07057 4.10289 5.97826L4.28165 5.87477C4.96376 5.48244 5.30434 5.28487 5.39372 4.94334L5.39842 4.92547C5.47839 4.58206 5.27329 4.22643 4.86403 3.5161C4.12547 2.2375 3.75573 1.59868 4.01916 1.15837L4.03327 1.13673C4.308 0.705828 5.02303 0.786739 6.45122 0.948562Z" stroke="white" strokeWidth="1.625" />
                                                             </svg>
                                                             <span>{card.badge}</span>
                                                         </div>