How to give shadow to a pointer of Tooltip> In HTML - 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>

Answer 2

You can use this code
body {
margin: 0;
padding: 0;
}
.example {
background: rgba(219,224,223,0.5);
margin-bottom: 20px;
padding: 20px;
text-align: center;
width: auto;
}
.example-with-box-shadow {
box-shadow: rgba(0,0,0,0.3) 0 2px 10px;
}
.example-with-arrow, .example-with-box-shadow, .example-with-drop-shadow {
background: white;
display: inline-block;
margin-bottom: 5px;
padding: 5px;
position: relative;
width: 200px;
}
.example-with-arrow::after, .example-with-box-shadow::after, .example-with-drop-shadow::after {
border: 10px solid;
border-top-color: currentcolor;
border-right-color: currentcolor;
border-bottom-color: currentcolor;
border-left-color: currentcolor;
border-color: white transparent transparent;
content: "";
left: 50%;
margin-left: -10px;
position: absolute;
top: 100%;
}
<div class="example">
<div class="example-with-box-shadow">Tooltip with box-shadow</div>
</div>

Answer 3

body {
background-color: #888;
}
.triangle {
position: relative;
margin: 3em;
padding: 1em;
box-sizing: border-box;
background: #bada55;
box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.triangle::after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -2em;
left: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent #bada55 #bada55;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
<div class="triangle">This is a CSS3 triangle with a proper box-shadow!</div>