Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

minor fix

Browse Source
This commit is contained in:
Red Adaya 2024-12-18 15:22:40 +08:00
parent e4bda65be2
commit bd3cb70d3a
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/app/element/tooltip.scss
View File

@ -5,6 +5,7 @@
width: max-content; width: max-content;
background-color: rgb(from var(--block-bg-color) r g b / 70%); background-color: rgb(from var(--block-bg-color) r g b / 70%);
color: var(--main-text-color); color: var(--main-text-color);
padding: 4px 8px; padding: 8px 10px;
border-radius: 4px; border-radius: 4px;
font-size: 12px;
} }

10
frontend/app/element/tooltip.tsx
View File

@ -28,12 +28,12 @@ interface TooltipOptions {
onOpenChange?: (open: boolean) => void; onOpenChange?: (open: boolean) => void;
} }
export function useTooltip({ export const useTooltip = ({
initialOpen = false, initialOpen = false,
placement = "top", placement = "top",
open: controlledOpen, open: controlledOpen,
onOpenChange: setControlledOpen, onOpenChange: setControlledOpen,
}: TooltipOptions = {}) { }: TooltipOptions = {}) => {
const arrowRef = React.useRef(null); const arrowRef = React.useRef(null);
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen); const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
@ -72,7 +72,7 @@ export function useTooltip({
}), }),
[open, setOpen, arrowRef, interactions, data] [open, setOpen, arrowRef, interactions, data]
); );
} };
type ContextType = ReturnType<typeof useTooltip> | null; type ContextType = ReturnType<typeof useTooltip> | null;
@ -88,12 +88,12 @@ export const useTooltipState = () => {
return context; 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`, // This can accept any props as options, e.g. `placement`,
// or other positioning options. // or other positioning options.
const tooltip = useTooltip(options); const tooltip = useTooltip(options);
return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>; return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
} };
export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>( export const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>(
function TooltipTrigger({ children, asChild = false, ...props }, propRef) { function TooltipTrigger({ children, asChild = false, ...props }, propRef) {