@atlaskit/tooltip
Version:
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
25 lines • 2.27 kB
JavaScript
import { __makeTemplateObject } from "tslib";
/** @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';
var baseCss = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: ", "px;\n box-sizing: border-box;\n font-size: 12px;\n left: 0;\n line-height: 1.3;\n max-width: 240px;\n padding: 2px 6px;\n top: 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n"], ["\n border-radius: ", "px;\n box-sizing: border-box;\n font-size: 12px;\n left: 0;\n line-height: 1.3;\n max-width: 240px;\n padding: 2px 6px;\n top: 0;\n word-wrap: break-word;\n overflow-wrap: break-word;\n"])), borderRadius());
var truncateCss = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n max-width: 420px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n max-width: 420px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])));
var TooltipContainer = forwardRef(function TooltipContainer(_a, ref) {
var style = _a.style, className = _a.className, children = _a.children, truncate = _a.truncate, placement = _a.placement, testId = _a.testId;
return (jsx(GlobalTheme.Consumer, null, function (_a) {
var mode = _a.mode;
return (jsx(TooltipPrimitive, { ref: ref, style: style, className: className, placement: placement, testId: testId, css: [
baseCss,
truncate ? truncateCss : null,
css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), mode === 'light' ? N800 : DN0, mode === 'light' ? N0 : DN600),
] }, children));
}));
});
TooltipContainer.displayName = 'TooltipContainer';
export default TooltipContainer;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=TooltipContainer.js.map