How do I make tooltip box-shadow using html css

Question

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:

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>

score 2 · Answer 1 · answered May 16 '21 at 11:08

.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: "";
        position: absolute;
        top: 100%;
        left: 10%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: white transparent transparent transparent;
    
        
}

<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>

Please replace chat::after your with:

.chat::after{
    content: "";
        position: absolute;
        top: 100%;
        left: 10%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: white transparent transparent transparent;
}

It looks close but I need a box shadow on the tip of the edge. When the size of the tip is increased the box shadow does not work i.e the tip exceeds the spread of the shadow. — Shahab Khan, May 16 '21 at 11:31

Behemoth · Accepted Answer · 2021-05-16T11:35:37.460

This working example comes quite close to the one in the picture:

.chat {
  position: relative;
  padding: 10px;
  margin: 5px 0px;
  display: flex;
  float: left;
  width: 80%;
  box-shadow: 0px 4px 15px 0px #00000040;
  background-color: white;
  z-index: 11;
  border-radius: 5px;
}

.chat::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  border: solid;
  border-width: 20px 18px 0 0;
  border-color: #ffffff transparent transparent transparent;
  transform: rotate(20deg);
  margin-top: -5px;
}

<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>

Edit:

If you want to add a shadow to your tooltip as well go with filter: drop-shadow(). Just keep in mind that this is a CSS-property that is not very well supported in a lot of browsers.

.chat {
  position: relative;
  padding: 10px;
  margin: 5px 0px;
  display: flex;
  float: left;
  width: 80%;
  box-shadow: 0px 4px 15px 0px #00000040;
  background-color: white;
  z-index: 11;
  border-radius: 5px;
}

.chat::after {
  z-index: -1;
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  border: solid;
  border-width: 20px 18px 0 0;
  border-color: #ffffff transparent transparent transparent;
  transform: rotate(20deg);
  margin-top: -5px;
  filter: drop-shadow(0px 12px 5px #00000040);
}

<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>

It looks close but I need a box shadow on the tip of the edge. — Shahab Khan, May 16 '21 at 11:27

How do I make tooltip box-shadow using html css

2 Answers2