Consider both vertical and horizontal into place re-calculation

w

src/utils/getPosition.js

@@ -21,54 +21,116 @@ export default function (e, target, node, place, effect, offset) {
  const defaultOffset = getDefaultPosition(effect, target.clientWidth, target.clientHeight, tipWidth, tipHeight)
  const {extraOffset_X, extraOffset_Y} = calculateOffset(offset)
 
- const widnowWidth = window.innerWidth
+ const windowWidth = window.innerWidth
  const windowHeight = window.innerHeight
 
  // Get the edge offset of the tooltip
  const getTipOffsetLeft = (place) => {
- const offset_X = defaultOffset[place].x
+ const offset_X = defaultOffset[place].l
+ return mouseX + offset_X + extraOffset_X
+ }
+ const getTipOffsetRight = (place) => {
+ const offset_X = defaultOffset[place].r
  return mouseX + offset_X + extraOffset_X
  }
  const getTipOffsetTop = (place) => {
- const offset_Y = defaultOffset[place].y
+ const offset_Y = defaultOffset[place].t
+ return mouseY + offset_Y + extraOffset_Y
+ }
+ const getTipOffsetBottom = (place) => {
+ const offset_Y = defaultOffset[place].b
  return mouseY + offset_Y + extraOffset_Y
  }
 
  // Judge if the tooltip has over the window(screen)
+ const outsideVertical = () => {
+ // Check for horazontal tooltip, if their vertical out of screen
+ let result = false
+ let newPlace
+ if (getTipOffsetTop('left') < 0 && getTipOffsetBottom('left') <= windowHeight) {
+ result = true
+ newPlace = 'bottom'
+ } else if (getTipOffsetBottom('left') > windowHeight && getTipOffsetTop('left') >= 0) {
+ result = true
+ newPlace = 'top'
+ }
+ if (result && outsideHorizontal().result) result = false
+ return {result, newPlace}
+ }
  const outsideLeft = () => {
- // if switch to right will out of screen, return false because switch placement doesn't make sense
- return getTipOffsetLeft('left') < 0 && getTipOffsetLeft('right') <= widnowWidth
+ // For horizontal tooltip, if vertical out of screen, change the vertical place
+ let {result, newPlace} = outsideVertical()
+ if (!result && getTipOffsetLeft('left') < 0 && getTipOffsetRight('right') <= windowWidth) {
+ result = true
+ newPlace = 'right'
+ }
+ return {result, newPlace}
  }
  const outsideRight = () => {
- return getTipOffsetLeft('right') > widnowWidth && getTipOffsetLeft('left') >= 0
+ let {result, newPlace} = outsideVertical()
+ if (!result && getTipOffsetRight('right') > windowWidth && getTipOffsetLeft('left') >= 0) {
+ result = true
+ newPlace = 'left'
+ }
+ return {result, newPlace}
+ }
+
+ const outsideHorizontal = () => {
+ let result = false
+ let newPlace
+ if (getTipOffsetLeft('top') < 0 && getTipOffsetRight('top') <= windowWidth) {
+ result = true
+ newPlace = 'right'
+ } else if (getTipOffsetRight('top') > windowWidth && getTipOffsetLeft('top') >= 0) {
+ result = true
+ newPlace = 'left'
+ }
+
+ if (result && outsideVertical().result) result = false
+ return {result, newPlace}
  }
  const outsideTop = () => {
- return getTipOffsetTop('top') < 0 && getTipOffsetTop('bottom') + tipHeight <= windowHeight
+ let {result, newPlace} = outsideHorizontal()
+ if (!result && getTipOffsetTop('top') < 0 && getTipOffsetBottom('bottom') <= windowHeight) {
+ result = true
+ newPlace = 'bottom'
+ }
+ return {result, newPlace}
  }
  const outsideBottom = () => {
- return getTipOffsetTop('bottom') + tipHeight > windowHeight && getTipOffsetTop('top') >= 0
+ let {result, newPlace} = outsideHorizontal()
+ if (!result && getTipOffsetBottom('bottom') > windowHeight && getTipOffsetTop('top') >= 0) {
+ result = true
+ newPlace = 'top'
+ }
+ return {result, newPlace}
  }
 
  // Return new state to change the placement to the reverse if possible
- if (place === 'left' && outsideLeft()) {
+ const outsideLeftResult = outsideLeft()
+ const outsideRightResult = outsideRight()
+ const outsideTopResult = outsideTop()
+ const outsideBottomResult = outsideBottom()
+
+ if (place === 'left' && outsideLeftResult.result) {
  return {
  isNewState: true,
- newState: {place: 'right'}
+ newState: {place: outsideLeftResult.newPlace}
  }
- } else if (place === 'right' && outsideRight()) {
+ } else if (place === 'right' && outsideRightResult.result) {
  return {
  isNewState: true,
- newState: {place: 'left'}
+ newState: {place: outsideRightResult.newPlace}
  }
- } else if (place === 'top' && outsideTop()) {
+ } else if (place === 'top' && outsideTopResult.result) {
  return {
  isNewState: true,
- newState: {place: 'bottom'}
+ newState: {place: outsideTopResult.newPlace}
  }
- } else if (place === 'bottom' && outsideBottom()) {
+ } else if (place === 'bottom' && outsideBottomResult.result) {
  return {
  isNewState: true,
- newState: {place: 'top'}
+ newState: {place: outsideBottomResult.newPlace}
  }
  }
 
@@ -109,19 +171,59 @@ const getDefaultPosition = (effect, targetWidth, targetHeight, tipWidth, tipHeig
  let right
  let bottom
  let left
- const disToMouse = 15
- const triangleHeight = 5
+ const disToMouse = 8
+ const triangleHeight = 2
 
  if (effect === 'float') {
- top = {x: -(tipWidth / 2), y: -(tipHeight + disToMouse - triangleHeight)}
- bottom = {x: -(tipWidth / 2), y: disToMouse}
- left = {x: -(tipWidth + disToMouse - triangleHeight), y: -(tipHeight / 2)}
- right = {x: disToMouse, y: -(tipHeight / 2)}
+ top = {
+ l: -(tipWidth / 2),
+ r: tipWidth / 2,
+ t: -(tipHeight + disToMouse + triangleHeight),
+ b: -disToMouse
+ }
+ bottom = {
+ l: -(tipWidth / 2),
+ r: tipWidth / 2,
+ t: disToMouse,
+ b: tipHeight + disToMouse + triangleHeight
+ }
+ left = {
+ l: -(tipWidth + disToMouse + triangleHeight),
+ r: -disToMouse,
+ t: -(tipHeight / 2),
+ b: tipHeight / 2
+ }
+ right = {
+ l: disToMouse,
+ r: tipWidth + disToMouse + triangleHeight,
+ t: -(tipHeight / 2),
+ b: tipHeight / 2
+ }
  } else if (effect === 'solid') {
- top = {x: -(tipWidth / 2), y: -(targetHeight / 2 + tipHeight)}
- bottom = {x: -(tipWidth / 2), y: targetHeight / 2}
- left = {x: -(tipWidth + targetWidth / 2), y: -(tipHeight / 2)}
- right = {x: targetWidth / 2, y: -(tipHeight / 2)}
+ top = {
+ l: -(tipWidth / 2),
+ r: tipWidth / 2,
+ t: -(targetHeight / 2 + tipHeight + triangleHeight),
+ b: -(targetHeight / 2)
+ }
+ bottom = {
+ l: -(tipWidth / 2),
+ r: tipWidth / 2,
+ t: targetHeight / 2,
+ b: targetHeight / 2 + tipHeight + triangleHeight
+ }
+ left = {
+ l: -(tipWidth + targetWidth / 2 + triangleHeight),
+ r: -(targetWidth / 2),
+ t: -(tipHeight / 2),
+ b: tipHeight / 2
+ }
+ right = {
+ l: targetWidth / 2,
+ r: tipWidth + targetWidth / 2 + triangleHeight,
+ t: -(tipHeight / 2),
+ b: tipHeight / 2
+ }
  }
 
  return {top, bottom, left, right}