CSS Only Tooltip Arrow - With Background, Border & Box-shadow? - css

Question

Tooltip CSS
.has-tooltip .tooltip {
position: absolute;
left: 50%;
top: -40px;
opacity: 0;
-webkit-transition: ease-out 300ms opacity;
-moz-transition: ease-out 300ms opacity 0ms;
-o-transition: ease-out 300ms opacity 0ms;
transition: ease-out 300ms opacity 0ms;
-webkit-transition-delay: 0ms;
pointer-events: none;
z-index: 9999;
}
.has-tooltip .tooltip span {
position: relative;
left: -50%;
display: block;
padding: 2px 8px;
font-size: 14px;
color: #fff;
white-space: nowrap;
background: rgba(45, 45, 45, 1);
border: 1px solid rgba(204,204,204,0.60);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
}
View Live Example
What I Am Trying To Achieve
By only having one element, have a tooltip styled as seen in the link above with a tooltip arrow which also has the same look applied to appear to be one element. I've seen multiple which place another element within for the arrow however I'm hoping to achieve this without needing to do so.
Questions
How can I have a tooltip arrow which gives the impression it is part of the tooltip with the same styles applied.
Note: If you provide code, could you please fully explain what you have done so I can implement a top tip as well as a bottom tip.

Answer 1

You could use a pseudo element, i.e. ::before, and by rotate it 45 deg and positioning it about half its height from the bottom so it looks like an arrow.
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: 50%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 10px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 4px solid #999;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 20%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
z-index: -1;
border: inherit;
border-width: 0 4px 4px 0;
}
a.has-tooltip:hover span {
opacity: 1;
}
<br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
Updated based on a comment
When one make a shadow like this, and as it is actually a square, their 2 shadows intersect
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
-webkit-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
-moz-box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
box-shadow: 4px 4px 0px 2px rgba(0,0,0,0.50);
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
To fix that is almost impossible, unless one use a SVG, though here is 2 possible solutions.
Give the shadow a non transparent color
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
-moz-box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
box-shadow: 0px 0px 0px 6px rgba(128,128,128,1);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
-webkit-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
-moz-box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
box-shadow: 4px 4px 0px 2px rgba(128,128,128,1);
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>
Use the other pseudo, ::after, as the shadow, which will be transparent. With this one need to play a little with the size of the main shadow and the position of the ::after pseudo.
a.has-tooltip {
position: relative;
transition: opacity 0.5s;
}
a.has-tooltip span {
position: absolute;
left: 20%; top: -10%;
transform: translate(0,-150%);
background: #333;
color: white;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.50);
padding: 10px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.2s;
border: 1px solid #FFFFFF;
}
a.has-tooltip span::before {
content: '';
position: absolute;
left: 10%; top: calc(100% - 10px);
height: 20px; width: 20px;
transform: rotate(45deg);
background: inherit;
z-index: -1;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
a.has-tooltip span::after {
content: '';
position: absolute;
left: calc(10% - 5px); top: calc(100% + 6px);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 16px solid rgba(0,0,0,0.50);
z-index: -2;
}
a.has-tooltip:hover span { opacity: 1; }
<br><br><br><br>
<a href="#" class="has-tooltip" id="link"><span>Hi! I'm a tooltip!</span>
Hi! I'm a link!
</a>