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'));

Codepen here。

Answer 1

这是一种可行的方法：

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），所以有可能有更好的方法。

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

1 个答案: