TiSer TiSer - 1 month ago 16
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: ->
...
<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?

Answer

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