Подсказка IconButton UI материала отображается неправильно

В моем приложении reactJS я использую Material UI и response-bootstrap-table.

В ячейке я использую Material UI IconButton следующим образом:

 <IconButton tooltip = {t('tooltips:editRegulation')} tooltipPosition = {'left'}
     onClick = {() => this.props.history.push("/pms-records/edit/" + row.pmsFindingId)}>{cell}}>
     <FontIcon className = "fa fa-pencil" aria-hidden = "true"/>
 </IconButton>

Результат такой:

Подсказка IconButton UI материала отображается неправильно

Подсказка обрезается краями ячеек таблицы. Пробовал менять z-index и читал это: https://github.com/mui-org/material-ui/issues/5912

Но решения нет.

Какие-нибудь подсказки для меня?

заранее спасибо

Можете ли вы предоставить воспроизводимую ссылку на stackblitz?

— 11.01.2019 15:22

css reactjs material-ui

11.01.2019 15:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 402

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашей ячейке наверняка есть css, в котором указано overflow: hidden. Вы можете отобразить всплывающую подсказку в портал, но в конечном итоге вы потеряете позицию своего элемента. Лучше переопределить CSS таблицы-ячейки

В связанной проблеме GitHub:

I got it fixed by adding style = { { overflow: 'visible' } } to the TableRowColumn that IconButton resides in.

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

— 11.01.2019 15:49

@ Mosè Raguzzini У меня такая же проблема, когда я отображаю всплывающую подсказку в контейнере с переполнением: прокрутите и клипы всплывающей подсказки сбоку от контейнера, как я могу переопределить свойство переполнения, есть ли другой способ?

— 06.10.2020 07:30

11.01.2019 15:37