admin管理员组

文章数量:1305282

I have such code inside file for modal:

...
Icon = require 'ponents/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>

But tooltip somehow appears behind the modal window. How to fix this?

I have such code inside file for modal:

...
Icon = require 'ponents/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>

But tooltip somehow appears behind the modal window. How to fix this?

  • javascript
  • twitter-bootstrap
  • reactjs
Share Improve this question asked Oct 11, 2016 at 17:04 kwaigonkwaigon 8153 gold badges12 silver badges31 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

.tooltip - is tooltip's class by default. So, the solution is to add this:

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

to the file with css for current page. It's issue on the bootstrap side.

Try adding the following two properties to the ponent styles:

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

本文标签： javascriptReact and Bootstrap tooltip inside modal (appears behind modal window)Stack Overflow

版权声明：本文标题：javascript - React and Bootstrap: tooltip inside modal (appears behind modal window) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741770682a2396732.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。