Problem description

Given an HTML structure with a trigger element and an associated tooltip container, write CSS so that:

• The tooltip is hidden by default and becomes visible when the user hovers over the trigger.

• It uses a semi-transparent background (rgba white, 0.2), backdrop-filter: blur(6px), rounded corners, padding, and a light box-shadow.

Goal

Write CSS to implement a glassmorphic tooltip using only CSS, ensuring it appears on hover, is positioned properly, and remains legible.

Constraints

• Use only CSS (no JavaScript).

• Tooltip should use position: absolute relative to a positioned parent.

• Use the :hover selector on the trigger to toggle visibility.

• Background should be rgba(255, 255, 255, 0.2) with backdrop-filter: blur(6px).

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.