React和Bootstrap：模态框中的工具提示（出现在模态窗口后面）

Question

我在模态框文件中有以下代码：

...
Icon = require 'components/shared/icon'
{ Checkbox, OverlayTrigger, Tooltip } = require 'react-bootstrap'
...
body: ->
...
  <Checkbox
    checked={ @state.myAttr }
    onChange={ @onMyAttrChange }>
    <OverlayTrigger placement='top' overlay={ <Tooltip> {I18n.t('my_attr')} </Tooltip> }>
      <Icon fa='info-circle' style={{ marginLeft: 5' }}  />
    </OverlayTrigger>
  </Checkbox>

但是提示框在模态窗口后面出现了。如何解决？

- TiSer

Answer 1

.tooltip - 是默认情况下工具提示的类名，想了解更多。 因此，解决方案是添加以下内容：

.tooltip { z-index: 1151 !important; }

将CSS文件添加到当前页面。这是Bootstrap方面的问题。

- TiSer

Answer 2

尝试将以下两个属性添加到组件样式中：

  position: relative;
  z-index: 10000 !important;

- Ahsan Farooq