CODEWITHSUNDEEP
javascripthtmlcssreactjs
rudeTool
rudeTool

Reputation: 606

make hover popup opaque in react css

I am working on a react app where on long texts when I hover my cursor,it shows a popup like this,but somehow its transparent and the table lines are also visible here.

enter image description here

As you can see,In between the lines I can see the white lines which are actually table borders.

How can i fix it?

Here's my code:

<Table.Cell data-title={message.message}>
                  {this.truncate(message.message, 50)}
                </Table.Cell>

This is the table row inside the component.

Now here's the css:

[data-title] {
    font-size: 14px;
    position: relative;
    cursor: help;
}
  
[data-title]:hover::before {
    content: attr(data-title);
  opacity: 1;
    position: absolute;
  margin-top:33px;
    padding: 10px;
    background: #000;
    color: #fff;
    font-size: 14px;
  width:300px;
    white-space: wrap;
}
[data-title]:hover::after {
    content: '';
    position: absolute;
  opacity: 1;
    bottom: -12px;
    left: 8px;
    border: 8px solid transparent;  
    border-bottom: 8px solid #000;
}

Any help will be appreciated.

Upvotes: 0

Views: 597

Answers (1)

Mehdi
Mehdi

Reputation: 449

you can give z-index to [data-title]:hover::before for example:

[data-title]:hover::before {
    content: attr(data-title);
    opacity: 1;
    position: absolute;
    margin-top:33px;
    padding: 10px;
    background: #000;
    color: #fff;
    font-size: 14px;
    width:300px;
    white-space: wrap;
    z-index: 9;
}

Upvotes: 1

Related Questions