Как сделать div всплывающим при переполнении?

Question

Я хочу отобразить div(with className='invoice-info') при наведении icon(which is in table cell) следующим образом:

<div
    style={{ position: "relative" }}
    onMouseEnter={() => setHoveredInvoiceId(result.gsCustomersID)}
    onMouseLeave={() => setHoveredInvoiceId()} >
    <i className="icon-container invoice-icon" id={"csInvoiceIcon" + 
         result.gsCustomersID}></i>
    <div className="invoice-info">Hello</div> //this is displayed conditionally
</div>

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

.invoice-info {
    position: absolute;
    background-color: red;
    width: 10vw;
    height: 10vh;
    z-index: 10;
    left: 1em;
    bottom: -6em;
}

Но из-за ширины table-cell достаточно мал, чтобы вместить только значок, div скрыт. Я дал z-index, чтобы он плавал, но он не работает. Я хочу плавающий div на зависании. Может ли кто-нибудь мне помочь?

Answer 1

Ячейка счета имеет свойство overflow:hidden. Сработало после изменения на overflow:visible

Answer 2

Вы можете использовать CSS вместо JS, что приведет к некоторому приросту производительности.

вы можете использовать что-то вроде этого:

.invoice-info{
   display: none;
   // your other styling
}

.icon-class:hover ~ .invoice-info{
 display: block;
}

~ - общий селектор брата в CSS