TiSer TiSer - 4 days ago 4x
React JSX Question

React and Bootstrap: tooltip inside modal (appears behind modal window)

I have such code inside file for modal:

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

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


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