github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/tooltip/tooltip.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import { Tooltip as TooltipReact } from 'react-tooltip';
    17  import ReactDOMServer from 'react-dom/server';
    18  
    19  // As long as there is only a single global provider, there is no need to sync its id manually.
    20  // We currently only provide styling for the default tooltip.
    21  export const tooltipProviderGlobalID = 'kuberpult-tooltip';
    22  
    23  export type TooltipProps = {
    24      children: JSX.Element;
    25      id: string;
    26      tooltipContent: JSX.Element;
    27      tooltipProviderID: string;
    28  };
    29  
    30  export const Tooltip = (overrides?: Partial<TooltipProps>): JSX.Element => {
    31      const props: TooltipProps = {
    32          tooltipProviderID: tooltipProviderGlobalID,
    33          children: <></>,
    34          id: '',
    35          tooltipContent: <></>,
    36          ...overrides,
    37      };
    38  
    39      const { children, tooltipContent, id, tooltipProviderID } = props;
    40      const delayHide = 50; // for debugging the css, increase this to 1000000
    41  
    42      // The React tooltip really wants us to use a href, but also we don't want to do anything on click:
    43      return (
    44          <div
    45              className={'tooltip-container'}
    46              id={'tooltip' + id}
    47              data-tooltip-place="bottom"
    48              data-tooltip-delay-hide={delayHide}
    49              data-tooltip-id={tooltipProviderID}
    50              data-tooltip-html={ReactDOMServer.renderToStaticMarkup(tooltipContent)}>
    51              {children}
    52          </div>
    53      );
    54  };
    55  
    56  export type TooltipProviderProps = { id: string; className: string };
    57  
    58  // The tooltip provider handles displaying of all tool tips with one sprt of styling.
    59  // It should always be rendered and hence present at root of the DOM (preferably in App.tsx).
    60  export const TooltipProvider = (overwrites?: Partial<TooltipProviderProps>): JSX.Element => {
    61      const props: TooltipProviderProps = { className: 'tooltip', id: tooltipProviderGlobalID, ...overwrites };
    62      return <TooltipReact className={props.className} id={props.id} border={'2px solid lightgray'}></TooltipReact>;
    63  };