External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-01 17:48:10 -03:30
Code Issues Packages Projects Releases Wiki Activity

working test commit

Browse Source
This commit is contained in:
John Mitchell
2018-12-04 14:46:18 -05:00
parent aab6aa4ef9
commit 3a8d95b03b
10 changed files with 96 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Tooltip/Tooltip.jsx
View File

@@ -3,36 +3,36 @@ import React from 'react';
class Tooltip extends React.Component {
transforms = {
top: {
bottom: "100%",
left: "50%",
transform: "translate(-50%, -25%)"
bottom: '100%',
left: '50%',
transform: 'translate(-50%, -25%)'
},
bottom: {
top: "100%",
left: "50%",
transform: "translate(-50%, 25%)"
top: '100%',
left: '50%',
transform: 'translate(-50%, 25%)'
},
left: {
top: "50%",
right: "100%",
transform: "translate(-25%, -50%)"
top: '50%',
right: '100%',
transform: 'translate(-25%, -50%)'
},
right: {
bottom: "100%",
left: "50%",
transform: "translate(25%, 50%)"
bottom: '100%',
left: '50%',
transform: 'translate(25%, 50%)'
},
};
constructor(props) {
super(props)
constructor (props) {
super(props);
this.state = {
isDisplayed: false
};
}
render() {
render () {
const {
children,
message,
@@ -44,24 +44,30 @@ class Tooltip extends React.Component {
return (
<span
style={{ position: "relative"}}
onMouseLeave={() => this.setState({ isDisplayed: false })}>
{ isDisplayed &&
<div
style={{ position: "absolute", zIndex: "10", ...this.transforms[position] }}
className={`pf-c-tooltip pf-m-${position}`}>
<div className="pf-c-tooltip__arrow"></div>
<div className="pf-c-tooltip__content">
{ message }
style={{ position: 'relative' }}
onMouseLeave={() => this.setState({ isDisplayed: false })}
>
{ isDisplayed
&& (
<div
style={{ position: 'absolute', zIndex: '10', ...this.transforms[position] }}
className={`pf-c-tooltip pf-m-${position}`}
>
<div className="pf-c-tooltip__arrow" />
<div className="pf-c-tooltip__content">
{ message }
</div>
</div>
</div>
)
}
<span
onMouseOver={() => this.setState({ isDisplayed: true })}>
onMouseOver={() => this.setState({ isDisplayed: true })}
onFocus={() => this.setState({ isDisplayed: true })}
>
{ children }
</span>
</span>
)
);
}
}