CSS tooltip background color hidden

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?

Solution

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>