imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Animate tooltips when hiding as well as showing

Browse source 
This uses the same animation style as on show, but twice as fast.
This commit is contained in:
J. Ryan Stinnett 2019-04-25 11:10:35 +01:00
parent 0b42ded007
commit 26f732723e
3 changed files with 40 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/views/elements/Tooltip.js
View file

@ -31,10 +31,20 @@ module.exports = React.createClass({
className: React.PropTypes.string,
// Class applied to the tooltip itself
tooltipClassName: React.PropTypes.string,
// Whether the tooltip is visible or hidden.
// The hidden state allows animating the tooltip away via CSS.
// Defaults to visible if unset.
visible: React.PropTypes.bool,
// the react element to put into the tooltip
label: React.PropTypes.node,
},
getDefaultProps() {
return {
visible: true,
};
},
// Create a wrapper for the tooltip outside the parent and attach it to the body element
componentDidMount: function() {
this.tooltipContainer = document.createElement("div");
@ -85,7 +95,10 @@ module.exports = React.createClass({
style = this._updatePosition(style);
style.display = "block";
const tooltipClasses = classNames("mx_Tooltip", this.props.tooltipClassName);
const tooltipClasses = classNames("mx_Tooltip", this.props.tooltipClassName, {
"mx_Tooltip_visible": this.props.visible,
"mx_Tooltip_invisible": !this.props.visible,
});
const tooltip = (
<div className={tooltipClasses} style={style}>