office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
35 lines • 2.52 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./Tooltip.Props", "../../Callout", "../../common/DirectionalHint", "./Tooltip.scss", "../../Styling"], function (require, exports, tslib_1, React, Utilities_1, Tooltip_Props_1, Callout_1, DirectionalHint_1, stylesImport, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Tooltip = (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_1.Callout, tslib_1.__assign({ className: Styling_1.mergeStyles('ms-Tooltip', Styling_1.AnimationClassNames.fadeIn200, styles.root, (delay === Tooltip_Props_1.TooltipDelay.medium) && styles.hasMediumDelay, (maxWidth !== null) && { maxWidth: maxWidth }), targetElement: targetElement, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL }, calloutProps, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)),
React.createElement("div", { className: Utilities_1.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: Utilities_1.css('ms-Tooltip-subText', styles.subText) }, props.content));
};
// Specify default props values
Tooltip.defaultProps = {
directionalHint: DirectionalHint_1.DirectionalHint.topCenter,
delay: Tooltip_Props_1.TooltipDelay.medium,
maxWidth: '364px',
calloutProps: {
isBeakVisible: true,
beakWidth: 16,
gapSpace: 0,
setInitialFocus: true,
doNotLayer: false
}
};
return Tooltip;
}(Utilities_1.BaseComponent));
exports.Tooltip = Tooltip;
});
//# sourceMappingURL=Tooltip.js.map