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 }