diff --git a/src/Tooltip.js b/src/Tooltip.js index d6ddfeed9d..7262e6cdfc 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -1,87 +1,82 @@ -import React from 'react'; import classNames from 'classnames'; -import BootstrapMixin from './BootstrapMixin'; -import CustomPropTypes from './utils/CustomPropTypes'; - -const Tooltip = React.createClass({ - mixins: [BootstrapMixin], - - propTypes: { - /** - * An html id attribute, necessary for accessibility - * @type {string} - * @required - */ - id: CustomPropTypes.isRequiredForA11y( - React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number - ]) - ), - - /** - * Sets the direction the Tooltip is positioned towards. - */ - placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']), - - /** - * The "left" position value for the Tooltip. - */ - positionLeft: React.PropTypes.number, - /** - * The "top" position value for the Tooltip. - */ - positionTop: React.PropTypes.number, - /** - * The "left" position value for the Tooltip arrow. - */ - arrowOffsetLeft: React.PropTypes.oneOfType([ - React.PropTypes.number, React.PropTypes.string - ]), - /** - * The "top" position value for the Tooltip arrow. - */ - arrowOffsetTop: React.PropTypes.oneOfType([ - React.PropTypes.number, React.PropTypes.string - ]), - /** - * Title text - */ - title: React.PropTypes.node - }, +import React from 'react'; - getDefaultProps() { - return { - placement: 'right' - }; - }, +import CustomPropTypes from './utils/CustomPropTypes'; +export default class Tooltip extends React.Component { render() { - const classes = { - 'tooltip': true, - [this.props.placement]: true - }; - - const style = { - 'left': this.props.positionLeft, - 'top': this.props.positionTop, - ...this.props.style - }; - - const arrowStyle = { - 'left': this.props.arrowOffsetLeft, - 'top': this.props.arrowOffsetTop - }; + const { + placement, + positionLeft, + positionTop, + arrowOffsetLeft, + arrowOffsetTop, + className, + style, + children, + ...props + } = this.props; return ( -
-
-
- {this.props.children} -
+
+
+ +
+ {children}
- ); +
+ ); } -}); +} + +Tooltip.propTypes = { + /** + * An html id attribute, necessary for accessibility + * @type {string} + * @required + */ + id: CustomPropTypes.isRequiredForA11y( + React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number + ]) + ), + + /** + * The direction the tooltip is positioned towards + */ + placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']), + + /** + * The `left` position value for the tooltip + */ + positionLeft: React.PropTypes.number, + /** + * The `top` position value for the tooltip + */ + positionTop: React.PropTypes.number, + /** + * The `left` position value for the tooltip arrow + */ + arrowOffsetLeft: React.PropTypes.oneOfType([ + React.PropTypes.number, React.PropTypes.string + ]), + /** + * The `top` position value for the tooltip arrow + */ + arrowOffsetTop: React.PropTypes.oneOfType([ + React.PropTypes.number, React.PropTypes.string + ]) +}; -export default Tooltip; +Tooltip.defaultProps = { + placement: 'right' +};