You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

75 lines
1.9 KiB

  1. /* eslint react/prop-types: 0 */
  2. import React, { Component } from "react";
  3. import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  4. import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
  5. class HelpButton extends Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. tooltipOpen: false
  10. };
  11. }
  12. showTooltip = () => {
  13. this.setState({
  14. tooltipOpen: true
  15. });
  16. };
  17. hideTooltip = () => {
  18. this.setState({
  19. tooltipOpen: false
  20. });
  21. };
  22. render() {
  23. return (
  24. <span className={this.props.className}>
  25. <span>
  26. {this.state.tooltipOpen ? (
  27. <span
  28. style={{
  29. position: "absolute",
  30. zIndex: 10,
  31. fontSize: "12px",
  32. color: "#000",
  33. backgroundColor: "#fff",
  34. display: "inline-block",
  35. borderRadius: "0.25rem",
  36. boxShadow: "-5px 0 5px rgba(0,0,0,0.5)",
  37. maxWidth: "200px",
  38. padding: "10px",
  39. marginLeft: "-215px",
  40. marginTop: "-25px"
  41. }}
  42. >
  43. <span
  44. style={{
  45. position: "absolute",
  46. width: 0,
  47. height: 0,
  48. borderTop: "10px solid transparent",
  49. borderBottom: "10px solid transparent",
  50. borderLeft: "10px solid #fff",
  51. marginLeft: "190px",
  52. marginTop: "15px"
  53. }}
  54. ></span>
  55. {this.props.children}
  56. </span>
  57. ) : (
  58. <span />
  59. )}
  60. </span>
  61. <FontAwesomeIcon
  62. icon={faQuestionCircle}
  63. onMouseOver={this.showTooltip}
  64. onMouseOut={this.hideTooltip}
  65. />
  66. </span>
  67. );
  68. }
  69. }
  70. export default HelpButton;