I'm having trouble adding a border to my tooltip that follows the outer lines of the entire tooltip. Currently, I've only been able to add a border to the upper part of the tooltip, which overlaps with the arrow section and isn't the desired effect.
HTML:
<p>Spam</p>
<p>Eggs</p>
<div data-tip="E-mail is only for registration">
<input type="text" name="test" value="44"/>
</div>
CSS:
[data-tip] {
position: relative;
}
[data-tip]:before {
content: '';
display: none;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid black;
position: absolute;
top: -10px;
left: 15px;
z-index: 8;
font-size: 1em;
line-height: 2em;
width: 0;
height: 0;
}
[data-tip]:after {
display: none;
content: attr(data-tip);
position: absolute;
top: -54px;
left: 0px;
border: 1px solid red;
padding: 10px 20px;
background-color: black;
color: white;
z-index: 9;
font-size: 0.75em;
height: 4em;
text-align: center;
vertical-align: middle;
line-height: 2em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
box-sizing: border-box;
white-space: nowrap;
word-wrap: normal;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
display:block;
}
Check out the jsfiddle link for more details.