diff --git a/src/TooltipContainer/index.js b/src/TooltipContainer/index.js
index dddecac..ba33539 100644
--- a/src/TooltipContainer/index.js
+++ b/src/TooltipContainer/index.js
@@ -19,9 +19,9 @@ class TooltipContainer extends React.Component {
}
static defaultProps = {
- offset: 8,
- padding: 16,
- caretSize: 5
+ offset: enums.offset,
+ padding: enums.padding,
+ caretSize: enums.caretSize
}
componentDidMount() {
@@ -56,6 +56,7 @@ class TooltipContainer extends React.Component {
console.log('done')}
ref={tooltip => this.tooltip = tooltip}
>
diff --git a/src/TooltipContainer/styles.css b/src/TooltipContainer/styles.css
index 18c120b..f36ae7d 100644
--- a/src/TooltipContainer/styles.css
+++ b/src/TooltipContainer/styles.css
@@ -1,10 +1,20 @@
.react-autotip-hidden {
- visibility: hidden;
opacity: 0;
+ transition-property: opacity;
+ transition-duration: 1s;
+ transition-timing-function: ease-in-out;
}
.react-autotip-active {
- visibility: visible;
opacity: 1;
- transition: opacity 0.25s ease-in 0.35s;
+}
+
+@keyframes in {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+
+@keyframes out {
+ 0% { opacity: 1; }
+ 100% { opacity: 0; }
}
diff --git a/src/utils/calc-position.test.js b/src/utils/calc-position.test.js
index 55341a7..6cca688 100644
--- a/src/utils/calc-position.test.js
+++ b/src/utils/calc-position.test.js
@@ -1,5 +1,8 @@
// local imports
-import calcPosition, { offset, padding } from './calc-position'
+import calcPosition from './calc-position'
+
+import enums from './enums'
+const { offset, padding } = enums
// dims of container that spawns tooltip
const container = { height: 25, width: 25 }
@@ -20,7 +23,7 @@ describe('utils', () => {
test('can position to the top of container (default)', () => {
// the dims of the container that spawns the tooltip
const containerDims = { ...container, top: 100, left: 100 }
- const res = calcPosition({ containerDims, tooltipDims })
+ const res = calcPosition({ containerDims, tooltipDims, offset, padding })
expect(res.pos).toEqual('top')
})
@@ -28,11 +31,11 @@ describe('utils', () => {
const left = padding + (tooltipDims.width / 2) - (container.width / 2)
const containerDims = { ...container, top: 100, left }
- let res = calcPosition({ containerDims, tooltipDims })
+ let res = calcPosition({ containerDims, tooltipDims, offset, padding })
expect(res.pos).toEqual('top')
containerDims.left = left - 1
- res = calcPosition({ containerDims, tooltipDims })
+ res = calcPosition({ containerDims, tooltipDims, offset, padding })
expect(res.pos).toEqual('right')
})
@@ -40,11 +43,11 @@ describe('utils', () => {
const left = window.innerWidth - (tooltipDims.width / 2) - padding - (container.width / 2)
const containerDims = { ...container, top: 100, left }
- let res = calcPosition({ containerDims, tooltipDims })
+ let res = calcPosition({ containerDims, tooltipDims, offset, padding })
expect(res.pos).toEqual('top')
containerDims.left = left + 1
- res = calcPosition({ containerDims, tooltipDims })
+ res = calcPosition({ containerDims, tooltipDims, offset, padding })
expect(res.pos).toEqual('left')
})
@@ -52,11 +55,11 @@ describe('utils', () => {
const top = padding + tooltipDims.height + offset
const containerDims = { ...container, left: 100, top }
- let res = calcPosition({ containerDims, tooltipDims })
+ let res = calcPosition({ containerDims, tooltipDims, offset, padding })
expect(res.pos).toEqual('top')
containerDims.top = top - 1
- res = calcPosition({ containerDims, tooltipDims })
+ res = calcPosition({ containerDims, tooltipDims, offset, padding })
expect(res.pos).toEqual('bottom')
})
})
diff --git a/src/utils/enums.js b/src/utils/enums.js
index 88ae337..8c6250e 100644
--- a/src/utils/enums.js
+++ b/src/utils/enums.js
@@ -1,3 +1,6 @@
export default {
- ON_TOOLTIP: 'onreactautotip'
+ ON_TOOLTIP: 'onreactautotip',
+ offset: 8,
+ padding: 16,
+ caretSize: 5
}