Develop Reference

How can I show a tooltip when a user hovers over the box shadow of an element?

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.

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>

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!

Reveal a HTML Div Via Animation?

I have a semi-circular div, which will have some content. It will be rendered but not visible to start with (using Angular 2). On a certain user action, hovering over another section of the screen, the div will appear, but I don't want to just use display:none/block, or hidden.
What I'm trying to do is have another div with similar css act as a mask and slide up to reveal the semi-circle div.
I have tried numerous ways, and it would be of no advantage to post that code here. I have animated it by changing it's position so it moves into view, but it seems like a ridiculous way to do it.
<div class="semi-circle">
<button class="add-button" >Add</button>
</div>
.semi-circle{
height:80px;
width:160px;
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:green;
}
.add-button{
position:absolute;
left: 65px;
top: 50px;
}
This is basically what it will look like

You can achieve this effect in CSS alone, with an ::after pseudo-element and a transition:
.semi-circle {
position: relative;
display: inline-block;
width:160px;
height:80px;
background-color: rgba(0,0,0,0);
border-radius: 90px 90px 0 0;
overflow: hidden;
}
.semi-circle::after {
content: '';
position: absolute;
display: block;
top: 80px;
left: 0;
width:160px;
height:80px;
background-color: rgb(0,255,0);
border-radius: 90px 90px 0 0;
transform: translateY(0);
transition: all 0.75s ease-out;
}
p {
display: inline-block;
width: 160px;
text-align: center;
}
p:hover ~ .semi-circle::after {
transform: translateY(-80px);
}
<p>Hover me</p>
<div class="semi-circle"></div>

dropdown-menu and drop-down list width is not perfectly align

I am not sure why my dropdown-menu, and my drop-down list width is not perfectly align. I set both of their width to be: width:300px;
It looks like this right now :
Here is what I have in JSFiddle

Since your .dropdown is inside the container #dd, its initial x-axis wont be the same as the parent, if the parent has any of the css layout enhancement applied which effect its width, like border or padding etc.
To solve this, you shall have to negate the effect of that padding or border, by applying a respective negative starting point on x-axis.
so just make the following change to your code.
.wrapper-dropdown-1 .dropdown {
position: absolute;
top: 100%;
left: -1px; /* <--- This is the change */
right: 0;
background: white;
list-style: none;
font-weight: normal;
opacity: 0;
pointer-events: none;
width: 300px;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}

If you add left: -1px; to your .wrapper-dropdown-1 .dropdown style it works the like it should. See bellow the added style rule
.wrapper-dropdown-1 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: -1px;
right: 0;

Scrolling in a single div causes overlapping

I used a position:fixed div with overflow: auto; as a transparent div in the back of some pop up.
The problem is when I scroll to see this pop up bottom or top, this overlap appears.
How could I keep using this div as a background with the ability to scroll without this overlapping?
HTML
<div class="popup_screen_bg">
<div class="popup_screen">
<!-- update partner "form" -->
</div>
</div>
CSS
.popup_screen_bg{
position: fixed;
min-width: 100%;
min-height: 100%;
height: auto;
z-index: 1000;
overflow: auto;
background: url('popup_transparent.png');
padding-bottom: 20px;
}
.popup_screen{
position: absolute;
min-width: 80%;
min-height: 80%;
left: 10%;
top: 10%;
background-color: #EEE;
border: 8px solid rgba(0, 0, 0, 0.5);
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
}
Note: This problem appears only in Chrome.

. You can see that it is scrolled down in google chrome, and there is no overlap. Maybe there's another reason? Or maybe it's just a glitch, since you said it is working on all other browsers. If you also look in the right, there are your styles, and your div is at the top of the interior of <body>.

Problem with the slider

I have a problem with a slider(mainly border issues). You can see a slider here
Click on the 6. Owner option and there you can see a border. This border should come on all the other tabs.

My solution would be to wrap div #slides in yet another div with this css:
height: 231px;
left: 438px;
overflow: hidden;
position: absolute;
top: 185px;
width: 683px;
and from the declaration of ".tophdr_rt_slider #slides" remove two attributes:
float: left;
margin-top: -236px;
After that it works like a charm.

Add this code:
<style type="text/css">
.slide {
overflow:hidden;
}
.slide img {
margin: 2px 10px 0px 10px;
}
</style>