fix: tooltip colors and sizing

bootwindui · Dec 12, 2023 · 52642cb · 52642cb
1 parent a9bee17
commit 52642cb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/packages/tooltip/src/lib/tooltip-content.tsx b/packages/tooltip/src/lib/tooltip-content.tsx
@@ -17,15 +17,13 @@ export const TooltipContent = ({ children, className, variant, position = "top"
         bottom: 'left-1/2 top-full z-20 mt-3 -translate-x-1/2',
     }
     const classes = cn(
-        'absolute rounded whitespace-nowrap px-4 py-[6px] text-sm font-semibold  opacity-0 group-hover:opacity-100',
-        variant === 'dark' ? 'bg-black text-white' : 'bg-white text-black',
+        'tooltip-content hidden absolute rounded whitespace-nowrap w-auto px-4 py-[6px] text-center text-sm font-semibold shadow-slate-300',
+        variant === 'dark' ? 'bg-[#2D3643] text-white' : 'bg-[#E9EFF6] text-slate-600',
         positionClasses[position]
     )
     return (
         <div className={classes}>
-            <div className={`w-40 whitespace-normal text-center`}>
                 {children}
-            </div>
         </div>
     )
 }
diff --git a/packages/tooltip/src/lib/tooltip.tsx b/packages/tooltip/src/lib/tooltip.tsx
@@ -2,13 +2,13 @@ import { cn } from "@bootwind/common";
 import React, { ReactNode } from "react";
 
 export interface TooltipProps {
-  content: ReactNode;
+  content?: ReactNode;
   children: ReactNode;
   variant?: "dark" | "light",
   position?: "top" | "bottom" | "right" | "left";
 }
 
-const Tooltip: React.FC<TooltipProps> = ({ children, content }) => {
+const Tooltip: React.FC<TooltipProps> = ({ children }) => {
 
   return (
     <div className="tooltip-wrapper group relative inline-block"> 

diff --git a/packages/ui/src/scss/main.scss b/packages/ui/src/scss/main.scss
@@ -9,6 +9,6 @@ a {
     @apply text-indigo-600;
 }
 
-.tooltip-trigger:hover ~ .tooltip-content {
-    opacity: 1
+.tooltip-wrapper:hover .tooltip-content {
+    display: block
 }