代码之家 › 专栏 › 技术社区 › Evan Trimboli

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

office-ui-fabric reactjs css

1

Evan Trimboli · 技术社区 · 7 年前

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 .

1 回复 | 直到 7 年前

1

2

Alex K frank 6 年前

这是一种可行的方法。我加了一个 div TooltipHost :

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