fix(formula): fixes edge cases for positioning tooltip

Signed-off-by: Diana Lease <[email protected]>

packages/ui-contract-editor/src/lib/components/Formula/index.js

@@ -8,15 +8,16 @@ import { FORMULA } from '../../ContractEditor/plugins/withClauseSchema';
 
 // overflow-wrap: break-word; // NEEDS TO BE NONE
 export const FormulaTooltip = styled.span`
+ z-index: 2;
  visibility: ${props => (props.currentHover ? 'visible' : 'hidden')};
- margin-top: -${props => (props.tooltipHeight + 1.35)}em;
+ transform: translateY(-110%);
  white-space: normal;
 
  &:before {
  content: '';
  position: absolute;
  bottom: -6.7px;
- left: ${props => props.caretLeft - 1}px;
+ left: 1px;
  border-top: 6px solid #141F3C;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
@@ -26,7 +27,7 @@ export const FormulaTooltip = styled.span`
  content: '';
  position: absolute;
  bottom: -6.7px;
- left: ${props => props.caretLeft}px;
+ left: 2px;
  border-top: 4px solid #141F3C;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
@@ -77,8 +78,6 @@ const Formula = React.forwardRef((props, ref) => {
  const formulaTooltip = {
  className: 'variableTooltip',
  currentHover: hoveringFormula,
- caretLeft: 2,
- tooltipHeight: 1.85,
  contentEditable: false
  };