Как заставить реагировать bootstrap подсказку, чтобы поместиться в контейнер? - PullRequest
Новая
       3

Как заставить реагировать bootstrap подсказку, чтобы поместиться в контейнер?

1 голос
/ 07 февраля 2020

Я делаю простое приложение «Реакция», для которого использую «Реакция» - bootstrap Здесь я пытаюсь отобразить очень очень простую подсказку, используя OverlayTrigger например, 

    <OverlayTrigger
      placement="bottom"
      overlay={
        <Tooltip id="tooltip" style={{ width: "100%" }}>
          thisisalongstringthanusualhencenotfilledincontiner
        </Tooltip>
      }
    >
      <span>Hover over this text</span>
    </OverlayTrigger>

Отображение подсказки работает нормально, но выравнивание не правильное.

Вы видите, что я дал непрерывная строка внутри всплывающей подсказки (в моем реальном приложении это динамическая строка c, и это там токен, который будет даже длиннее, чем я дал выше, поэтому я не могу изменить эту непрерывную строку).

Проблема в том, что при наведении курсора видны только несколько частей строки, а остальная часть строки находится вне контейнера.

Рабочая песочница: https://codesandbox.io/s/react-bootstrap-tooltip-button-modal-wjybr

Попытка дать style={{ width: "100%" }} всплывающей подсказке, но не повезло .. Она все еще не помещается в контейнер всплывающей подсказки ..

Мне нужно сделать это вписаться в контейнер. Пожалуйста, помогите мне поместить всю строку в контейнер всплывающей подсказки.

1 Ответ

0 голосов
/ 07 февраля 2020

Вы можете просто использовать свойство word-break css и указать для него значение 'break-all', чтобы оно разбивалось на разные строки, если текст слишком длинный. 

<Tooltip id="tooltip" style={{ width: "100%", wordBreak:'break-all' }}>
  thisisalongstringthanusualhencenotfilledincontiner
</Tooltip>

Я воспроизвел демо-версию над здесь .

...