34 lines
957 B
TypeScript
34 lines
957 B
TypeScript
import React, { FC, useCallback } from 'react'
|
|
import { Tooltip as AntdTooltip, TooltipProps as AntdTooltipProps } from 'antd'
|
|
import { ReactComponent as CloseIcon } from '../../icons/close.svg'
|
|
import styled from 'styled-components'
|
|
|
|
export type TooltipProps = AntdTooltipProps & { closeable?: boolean; primary?: boolean }
|
|
|
|
const Close = styled.span`
|
|
line-height: 17px;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
padding-left: 4px;
|
|
|
|
> svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
line-height: 17px;
|
|
}
|
|
`
|
|
|
|
export const Tooltip: FC<TooltipProps> = ({ closeable, primary, title, overlayClassName, ...props }) => {
|
|
const handleClick = useCallback(() => {
|
|
document.documentElement.click()
|
|
}, [])
|
|
return (
|
|
<AntdTooltip
|
|
trigger="click"
|
|
overlayClassName={`health-tooltip${primary ? '-highlighted' : ''} ${overlayClassName || ''}`}
|
|
{...props}
|
|
title={<>{title} {closeable ? <Close><CloseIcon onClick={handleClick} /></Close> : null}</>}
|
|
/>
|
|
)
|
|
}
|