diff --git a/src/Popover.js b/src/Popover.js
index 4c18e2b183..c0ea27a6eb 100644
--- a/src/Popover.js
+++ b/src/Popover.js
@@ -1,9 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import BootstrapMixin from './BootstrapMixin';
+import FadeMixin from './FadeMixin';
const Popover = React.createClass({
- mixins: [BootstrapMixin],
+ mixins: [BootstrapMixin, FadeMixin],
propTypes: {
placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
@@ -15,12 +16,14 @@ const Popover = React.createClass({
arrowOffsetTop: React.PropTypes.oneOfType([
React.PropTypes.number, React.PropTypes.string
]),
- title: React.PropTypes.node
+ title: React.PropTypes.node,
+ animation: React.PropTypes.bool
},
getDefaultProps() {
return {
- placement: 'right'
+ placement: 'right',
+ animation: true
};
},
@@ -28,7 +31,9 @@ const Popover = React.createClass({
const classes = {
'popover': true,
[this.props.placement]: true,
- 'in': this.props.positionLeft != null || this.props.positionTop != null
+ // in class will be added by the FadeMixin when the animation property is true
+ 'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null),
+ 'fade': this.props.animation
};
const style = {
diff --git a/src/Tooltip.js b/src/Tooltip.js
index fd769d5d12..1c7dafeb80 100644
--- a/src/Tooltip.js
+++ b/src/Tooltip.js
@@ -1,9 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import BootstrapMixin from './BootstrapMixin';
+import FadeMixin from './FadeMixin';
const Tooltip = React.createClass({
- mixins: [BootstrapMixin],
+ mixins: [BootstrapMixin, FadeMixin],
propTypes: {
placement: React.PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
@@ -14,12 +15,14 @@ const Tooltip = React.createClass({
]),
arrowOffsetTop: React.PropTypes.oneOfType([
React.PropTypes.number, React.PropTypes.string
- ])
+ ]),
+ animation: React.PropTypes.bool
},
getDefaultProps() {
return {
- placement: 'right'
+ placement: 'right',
+ animation: true
};
},
@@ -27,7 +30,9 @@ const Tooltip = React.createClass({
const classes = {
'tooltip': true,
[this.props.placement]: true,
- 'in': this.props.positionLeft != null || this.props.positionTop != null
+ // in class will be added by the FadeMixin when the animation property is true
+ 'in': !this.props.animation && (this.props.positionLeft != null || this.props.positionTop != null),
+ 'fade': this.props.animation
};
const style = {
diff --git a/test/PopoverSpec.js b/test/PopoverSpec.js
new file mode 100644
index 0000000000..611634bf5a
--- /dev/null
+++ b/test/PopoverSpec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Popover from '../src/Popover';
+
+describe('Popover', function () {
+ it('Should output a popover title and content', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ Popover Content
+
+ );
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-title'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'popover-content'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
+ });
+
+ it('Should not have the fade class if animation is false', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ Popover Content
+
+ );
+ assert.equal(instance.getDOMNode().className.match(/\bfade\b/), null, 'The fade class should not be present');
+ });
+});
diff --git a/test/TooltipSpec.js b/test/TooltipSpec.js
new file mode 100644
index 0000000000..cd878f3a19
--- /dev/null
+++ b/test/TooltipSpec.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import Tooltip from '../src/Tooltip';
+
+describe('Tooltip', function () {
+ it('Should output a tooltip with content', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ Tooltip Content
+
+ );
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'strong'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'fade'));
+ });
+
+ it('Should not have the fade class if animation is false', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ Tooltip Content
+
+ );
+ assert.equal(instance.getDOMNode().className.match(/\bfade\b/), null, 'The fade class should not be present');
+ });
+});