How to give shadow to a pointer of Tooltip> In HTML

Question

I know I can absolute position the pointer of the Tooltip but how can I add the blur effect to the pointer? Because if I put blur effect to it, the blur will not only be shown on the bottom triangle of pointer, but also on the upper half of it.

Answer 1

You can try drop-shadow filter css effect.

.pointer {
  width: 200px;
  padding: 10px;
  position: relative;
  filter: drop-shadow(0px 0px 10px #b2b2b2);
  background: #fff;
}

.pointer:after {
  content: "";
  position: absolute;
  border: 20px solid;
  border-color: #fff transparent transparent;
  bottom: -40px;
  left: calc(50% - 20px);
}

<div class="pointer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis interdum cursus.</div>

Check filter cross browser support

---

Also you can achieve this by using box-shadow and z-index css property. In this you will need to make an extra block to cover the upper part of shadow using :before/:after.

.pointer {
  width: 200px;
  padding: 10px;
  position: relative;
  box-shadow: 0px 0px 10px #b2b2b2;
  background: #fff;
  z-index: 1;
}

.pointer:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  box-shadow: 0px 0px 10px #b2b2b2;
  bottom: -15px;
  left: calc(50% - 15px);
  background: #fff;
  transform: rotate(45deg);
  z-index: -2;
}

.pointer:before {
  content: "";
  width: 60px;
  height: 30px;
  position: absolute;
  background: #fff;
  left: calc(50% - 30px);
  bottom: 0;
  z-index: -1;
}

<div class="pointer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis interdum cursus.</div>