diff --git a/frontend/app/element/tooltip.scss b/frontend/app/element/tooltip.scss
index 5012c90dc..0a3eb6ca3 100644
--- a/frontend/app/element/tooltip.scss
+++ b/frontend/app/element/tooltip.scss
@@ -5,6 +5,7 @@
 	width: max-content;
 	background-color: rgb(from var(--block-bg-color) r g b / 70%);
 	color: var(--main-text-color);
-	padding: 4px 8px;
+	padding: 8px 10px;
 	border-radius: 4px;
+	font-size: 12px;
 }
\ No newline at end of file
diff --git a/frontend/app/element/tooltip.tsx b/frontend/app/element/tooltip.tsx
index 381bccbc1..22cfc298e 100644
--- a/frontend/app/element/tooltip.tsx
+++ b/frontend/app/element/tooltip.tsx
@@ -28,12 +28,12 @@ interface TooltipOptions {
     onOpenChange?: (open: boolean) => void;
 }
 
-export function useTooltip({
+export const useTooltip = ({
     initialOpen = false,
     placement = "top",
     open: controlledOpen,
     onOpenChange: setControlledOpen,
-}: TooltipOptions = {}) {
+}: TooltipOptions = {}) => {
     const arrowRef = React.useRef(null);
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
 
@@ -72,7 +72,7 @@ export function useTooltip({
         }),
         [open, setOpen, arrowRef, interactions, data]
     );
-}
+};
 
 type ContextType = ReturnType<typeof useTooltip> | null;
 
@@ -88,12 +88,12 @@ export const useTooltipState = () => {
     return context;
 };
 
-export function Tooltip({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {
+export const Tooltip = ({ children, ...options }: { children: React.ReactNode } & TooltipOptions) => {
     // This can accept any props as options, e.g. `placement`,
     // or other positioning options.
     const tooltip = useTooltip(options);
     return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
-}
+};
 
 export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>(
     function TooltipTrigger({ children, asChild = false, ...props }, propRef) {