CSS tooltip background color hidden - css

Question

Here's my code:
/* Tooltip container */
.tip {
position: relative;
display: inline-block;
cursor: help;/*change the cursor symbol to a question mark on mouse over*/
color: inherit;/*inherit text color*/
text-decoration: none;/*remove underline*/
}
/*Tooltip text*/
.tip span {
visibility: hidden;
width: 80%;
text-align: left;
padding: .6em;
padding-left: 1em;
border: 1px solid ;
border-radius: 0.5em;
font: 400 12px Arial;
color: #ffffff;
background-color: #000000;
display: inline-block;/*Position the tooltip text*/
position: absolute;/*positioned relative to the tooltip container*/
bottom: -5px;
top: 105%;
z-index: 100;
}
.tip:hover span {
visibility: visible;
}
<a href="javascript:void(0)" class="tip">
Container text
<span>
Tooltip text
</span></a>
I am trying to make my tooltip show up when you hover over the text. The problem is, while the text (currently in white) shows up over other elements, the background (currently in black) does not. How do I make sure that the background color shows through so that my text is visible?

Answer 1

The problem lies in your CSS for positioning the tooltip:
position: absolute;/*positioned relative to the tooltip container*/
bottom: -5px;
top: 105%;
You only need to specify the offset relative to the tooltip container with one attribute - either bottom or top, but not both. By using both, you're essentially defining a height for your tooltip and, since your text is too big to fit into that constrained height, it looks cut off. So just remove either top OR bottom and problem solved.

Answer 2

I made few changes to your css in order to make the text visible. Rest of your code looks fine. Run and check from the below Snippet.
/* Tooltip container */
.tip{
position: relative;
display: inline-block;
cursor: help; /*change the cursor symbol to a question mark on mouse over*/
color: inherit; /*inherit text color*/
text-decoration: none; /*remove underline*/
}
/*Tooltip text*/
.tip span {
visibility: hidden;
width:80%;
text-align: center;
padding: 1em 0em 1em 0em;
border: 1px solid [template("base font color")];
border-radius: 0.5em;
font: 400 12px Arial;
color: #ffffff;
background-color: #000000;
display: inline-block;
/*Position the tooltip text*/
position: absolute; /*positioned relative to the tooltip container*/
top: 105%;
z-index:100;
}
.tip:hover span {
visibility: visible;
}
<a href="javascript:void(0)" class="tip">
Container text
<span>
Tooltip text
</span></a>