Реакция и начальная загрузка: всплывающая подсказка внутри модального (появляется за модальным окном)

#javascript #twitter-bootstrap #reactjs

#javascript #twitter-bootstrap #reactjs

Вопрос:

У меня есть такой код внутри файла для модального:

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

Но всплывающая подсказка каким-то образом появляется за модальным окном. Как это исправить?

Ответ №1:

.tooltip — это класс всплывающей подсказки по умолчанию. Итак, решение состоит в том, чтобы добавить это:

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

в файл с css для текущей страницы. Это проблема на стороне начальной загрузки.

Ответ №2:

Попробуйте добавить следующие два свойства к стилям компонентов:

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