css - 正确定位绝对定位元素的工具提示

Question

我有一个绝对定位的元素，我想为其显示工具提示。当我显示它时，工具提示未与元素对齐。如何使其正确对齐？

CSS 代码:

#content {
  width: 200px;
  height: 200px;
}

JSX 代码:

const { IconButton, TooltipHost, Fabric } = window.Fabric;

const styles = {
  root: {
    width: 200,
    height: 200,
    position: 'relative'
  },
  icon: {
    position: 'absolute',
    right: 20,
    bottom: 20
  }
}

class Content extends React.Component {
  render() {
    return (
      <Fabric style={styles.root}>
        <TooltipHost content="The tip">
          <IconButton style={styles.icon} iconProps={{ iconName: 'Org' }} />
        </TooltipHost>
      </Fabric>
    );
  }
}

ReactDOM.render(<Content />,  document.getElementById('content'));

代码笔 here .

Answer 1

这是一种似乎有效的方法。我在 TooltipHost 周围添加了一个 div 包装器:

https://codepen.io/anon/pen/bxVWdz

const { IconButton, TooltipHost, Fabric } = window.Fabric;

const styles = {
  root: {
    width: 200,
    height: 200,
    position: 'relative',
  },
  iconWrapper: {
    position: 'absolute',
    right: 20,
    bottom: 20,
  }
}

class Content extends React.Component {
  render() {
    return (
      <Fabric style={styles.root}>
        <div style={styles.iconWrapper}>
          <TooltipHost content="The tip">
            <IconButton iconProps={{ iconName: 'Org' }} />
          </TooltipHost>
        </div>
      </Fabric>
    );
  }
}

ReactDOM.render(<Content />,  document.getElementById('content'));

我之前没有使用过库 (Office UI Fabric)，所以可能有更好的方法。