github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/views/shared/components/toolTip/index.tsx (about)

     1  // Copyright 2018 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import { Tooltip } from "antd";
    12  import React from "react";
    13  import { AbstractTooltipProps } from "antd/es/tooltip";
    14  import classNames from "classnames";
    15  
    16  import "./tooltip.styl";
    17  
    18  interface ToolTipWrapperProps extends AbstractTooltipProps {
    19    text: React.ReactNode;
    20    short?: boolean;
    21    children?: React.ReactNode;
    22  }
    23  /**
    24   * ToolTipWrapper wraps its children with an area that detects mouseover events
    25   * and, when hovered, displays a floating tooltip to the immediate right of
    26   * the wrapped element.
    27   *
    28   * Note that the child element itself must be wrappable; certain CSS attributes
    29   * such as "float" will render parent elements unable to properly wrap their
    30   * contents.
    31   */
    32  
    33  // tslint:disable-next-line: variable-name
    34  export const ToolTipWrapper = (props: ToolTipWrapperProps) => {
    35    const { text, children, placement } = props;
    36    const overlayClassName = classNames("tooltip__preset--white", `tooltip__preset--placement-${placement}`);
    37    return (
    38      <Tooltip title={ text } placement="bottom" overlayClassName={overlayClassName} {...props}>
    39        {children}
    40      </Tooltip>
    41    );
    42  };
    43  
    44  ToolTipWrapper.defaultProps = {
    45    placement: "bottom",
    46  };