@atlaskit/tooltip
Version:
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
38 lines • 1.37 kB
JavaScript
/** @jsx jsx */
import { forwardRef } from 'react';
import { css, jsx } from '@emotion/core';
import { DN0, DN600, N0, N800 } from '@atlaskit/theme/colors';
import GlobalTheme from '@atlaskit/theme/components';
import { borderRadius } from '@atlaskit/theme/constants';
import TooltipPrimitive from './TooltipPrimitive';
const baseCss = css `
border-radius: ${borderRadius()}px;
box-sizing: border-box;
font-size: 12px;
left: 0;
line-height: 1.3;
max-width: 240px;
padding: 2px 6px;
top: 0;
word-wrap: break-word;
overflow-wrap: break-word;
`;
const truncateCss = css `
max-width: 420px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const TooltipContainer = forwardRef(function TooltipContainer({ style, className, children, truncate, placement, testId }, ref) {
return (jsx(GlobalTheme.Consumer, null, ({ mode }) => (jsx(TooltipPrimitive, { ref: ref, style: style, className: className, placement: placement, testId: testId, css: [
baseCss,
truncate ? truncateCss : null,
css `
background-color: ${mode === 'light' ? N800 : DN0};
color: ${mode === 'light' ? N0 : DN600};
`,
] }, children))));
});
TooltipContainer.displayName = 'TooltipContainer';
export default TooltipContainer;
//# sourceMappingURL=TooltipContainer.js.map