Desired Outcome:
I am aiming to achieve a blurred background behind the tooltip element.
https://i.sstatic.net/AE1RQ.png
Current Status
The current state shows that the area behind the tooltip is not blurred as intended.
https://i.sstatic.net/bE57E.png
Code Implementation
To view the complete code implementation, please refer to my jsFiddle link: https://jsfiddle.net/heetertc/d8qw03jg/33/.
Outlined below are the crucial sections demonstrating what I have attempted:
/* CSS */
.tooltip-inner {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.tooltip-inner::before {
content: '';
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.tooltip-inner::after {
content: '';
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
}
.card {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
}
.card::before {
content: '';
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
}
<!-- HTML -->
<!-- Your HTML code here -->
Attempted Solutions
The following approaches were explored in an effort to address the issue:
- Why isn't backdrop-filter: blur() functioning correctly?
- Suggests using
background-color: rgba(0,0,0,.3)
- Suggests using
- https://www.reddit.com/r/css/comments/14r41xo/how_do_you_achieve_this_blur_effect/
- Proposes employing
backdrop-filter:blur(3px); - Also mentions utilizing a pseudo-element like
:before
- Proposes employing
Below snippet showcases some JavaScript and CSS used: