当用户将鼠标悬停在元素的框阴影上方时，如何显示工具提示？

Question

I have an element that is 1x1 px, with a box shadow that is much larger. I would like a tooltip to display whenever the user hovers, but the problem is that the tooltip only activates when the user hovers over the 1x1 px area, ignoring the huge box shadow.

The blue element (glow) in this fiddle is an example. I tried making the green element (glow2) larger just to show how the tooltip should look.

https://jsfiddle.net/fortunette/fLm3d7oz/1/

.glow {

        width: 1px;
        height: 1px;
        background-color: blue;
        border-radius: 50%;
        box-shadow: 0 0 24px 19px blue;
        position:absolute;
        top:300px;
        left:100px;
  }

Other requirements are that there are an arbitrary number of these glowing elements at arbitrary positions and sizes.

Answer 1

Create pseudo-elements that are the same size as the entire area of your divs including the box-shadow.

The pseudo-element overlays can be transparent . Then use the :hover state for the pseudo-elements to trigger the tool tip .

Working example:

 .glow { width: 1px; height: 1px; background-color: blue; border-radius: 50%; box-shadow: 0 0 24px 19px blue; position: relative; margin: 2em; } .glow:after { content: ""; display: block; height: 50px; width: 50px; position: absolute; top: -25px; /* needs to be half of height and width */ left: -25px; /* needs to be half of height and width */ border-radius: 50%; } .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .glow .tooltiptext { display: none; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .glow:hover:hover .tooltiptext { display: block; } 

 <div class="glow"><span class="tooltiptext">Tooltip text</span></div> 

Answer 2

The box shadow is not part of the box html element and that is why your tooltip is not showing. I would recommend you wrap your box with in a div and use the tooltip on the outer div that also contains your box shadow. Of course you will have to add padding to the outer div so it will fully contain the box shadow. This way when the user hover on the box shadow, they are actually hovering on top of the outer div and the tooltip will show up. You can use google chrome developing tools (ctrl+shift+i) to see how much padding you will need. Use a: hover or JqueryUI tooltip on the outer div class. Hope this helps!