Как изменить ширину всплывающей подсказки в reactjs?

Question

Я делаю очень простое reactjs приложение, в котором мне нужно отобразить всплывающую подсказку над текстом ..

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

До того, как у меня возникла проблема с подгонкой содержания подсказки в контейнер, поэтому я использовал wordBreak: "break-all", чтобы он помещался в контейнер.

Рабочий пример здесь ...

Но теперь я получил требование, чтобы всплывающая подсказка отображала по горизонтали , теперь вы можете видеть, что она делает разрывы слов и контейнер является вертикальным с фиксированной шириной. Но как я могу изменить ширину контейнера всплывающей подсказки, чтобы сделать текст по горизонтали в одну строку ??

Из приведенного выше кода текст thisisalongstringthanusualhencenotfilledincontiner должен отображаться в одной строке с всплывающей подсказкой ..

Пожалуйста, помогите мне изменить ширину контейнера подсказок в реакции bootstrap ..

Answer 1

<Tooltip className="mytooltip" ...>

css

.mytooltip > .tooltip-inner {
  max-width: 100%;
}

.mytooltip > .tooltip-arrow {
  ...
}

Answer 2

Вы можете добавить это css

.tooltip .tooltip-inner {
  width: 7em;
  white-space: normal;
}

Если вы проверите, по умолчанию вы увидите подсказку, расположенную после элемента, на который она ссылается. Таким образом, вы можете выбрать для него значение CSS для ширины и прочего.

Answer 3

Добавить css свойство в класс ниже.

.tooltip-inner {
    max-width: none; 
}