office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
40 lines • 2.38 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { BaseComponent, css, getNativeProps, divProperties } from '../../Utilities';
import { TooltipDelay } from './Tooltip.types';
import { Callout } from '../../Callout';
import * as stylesImport from './Tooltip.scss';
var styles = stylesImport;
import { AnimationClassNames, mergeStyles } from '../../Styling';
var Tooltip = /** @class */ (function (_super) {
tslib_1.__extends(Tooltip, _super);
function Tooltip() {
return _super !== null && _super.apply(this, arguments) || this;
}
Tooltip.prototype.render = function () {
var _a = this.props, targetElement = _a.targetElement, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, delay = _a.delay, id = _a.id, maxWidth = _a.maxWidth, _b = _a.onRenderContent, onRenderContent = _b === void 0 ? this._onRenderContent : _b;
return (React.createElement(Callout, tslib_1.__assign({ target: targetElement, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL }, calloutProps, getNativeProps(this.props, divProperties), { className: mergeStyles('ms-Tooltip', AnimationClassNames.fadeIn200, styles.root, (delay === TooltipDelay.medium) && styles.hasMediumDelay, (maxWidth !== null) && { maxWidth: maxWidth }, calloutProps ? calloutProps.className : undefined, this.props.className) }),
React.createElement("div", { className: css('ms-Tooltip-content', styles.content), id: id, role: 'tooltip' }, onRenderContent(this.props, this._onRenderContent))));
};
Tooltip.prototype._onRenderContent = function (props) {
return (React.createElement("p", { className: css('ms-Tooltip-subText', styles.subText) }, props.content));
};
// Specify default props values
Tooltip.defaultProps = {
directionalHint: 1 /* topCenter */,
delay: TooltipDelay.medium,
maxWidth: '364px',
calloutProps: {
isBeakVisible: true,
beakWidth: 16,
gapSpace: 0,
setInitialFocus: true,
doNotLayer: false
}
};
return Tooltip;
}(BaseComponent));
export { Tooltip };
//# sourceMappingURL=Tooltip.js.map