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

【问题标题】：React and Bootstrap: tooltip inside modal (appears behind modal window)React 和 Bootstrap：模态框内的工具提示（出现在模态窗口后面）
【发布时间】：2017-02-20 07:42:56
【问题描述】：

我在模态文件中有这样的代码：

...
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>

但是工具提示以某种方式出现在模态窗口的后面。如何解决这个问题？

【问题讨论】：

标签： javascript twitter-bootstrap reactjs

【解决方案1】：

.tooltip - 是default 的工具提示类。所以，解决方案是添加这个：

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

到当前页面的带有 css 的文件。这是引导程序方面的问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：