react-uwp
react-uwp copied to clipboard
The tooltip component may cause some unhappiness
I have found that the Tootip component doesn't have an attribute that can set the style of the root. It makes my layout very messy. I solved it by making a new class inherited from it (Maybe it is ugly) .
class TooltipStyleable extends Tooltip{
constructor(props){
super(props);
this.props = props;
}
render(){
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var _this = this;
var _a = this.props, verticalPosition = _a.verticalPosition, autoCloseTimeout = _a.autoCloseTimeout, autoClose = _a.autoClose, margin = _a.margin, horizontalPosition = _a.horizontalPosition, children = _a.children, content = _a.content, contentNode = _a.contentNode, closeDelay = _a.closeDelay, background = _a.background, className = _a.className, attributes = __rest(_a, ["verticalPosition", "autoCloseTimeout", "autoClose", "margin", "horizontalPosition", "children", "content", "contentNode", "closeDelay", "background", "className"]);
var theme = this.context.theme;
var tooltipStyle = this.getTooltipStyle();
var classes = theme.prepareStyles({
className: "tooltip",
styles: {
tooltip: tooltipStyle,
root: { position: "relative", display: "inline-block",...this.props["rootstyle"] }
}
});
return (React.createElement("div", Object.assign({}, classes.root, { ref: function (rootElm) { return _this.rootElm = rootElm; }, onMouseEnter: this.toggleShow, onClick: this.toggleShow, onMouseLeave: this.toggleHide }),
React.createElement("span", Object.assign({ ref: function (tooltipElm) { return _this.tooltipElm = tooltipElm; } }, attributes, classes.tooltip), content || contentNode),
children))
}
};