How do I make tooltip using html css

  css, html, javascript, reactjs

I am trying to make a tooltip with box-shadow, I search to fixed this issue but not succeed, if someone helps me I shall very much thank full to you. the issue is shown below: enter image description here

here is code:

.chat{
    position: relative;
    padding:5px 5px;
    margin: 5px 0px;
    display: flex;
    float:left;
    width:80%;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: white;
     z-index: 11;
    
}
.chat::after{
    content: '';
    width: 50px;
    height: 50px;
    background-color: white;
    left: 19px;
    position: absolute;
    height: 0;
    top: 33px;
    border-right: 28px solid transparent;
    border-top: 19px solid #fff;
    transform: rotate(45deg);
    box-shadow: -7px 0px 3px 0px #1111;
    z-index: 1;
    
        
}
<div class="chat">
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Scelerisque duis vitae integer cursus varius augue sed egestas. Aliquam porttitor elementum mi sed urna.</div>
    </div>

Source: Ask Javascript Questions

LEAVE A COMMENT