Make span visible on hover css

Question

I have a problem with showing the span on the hover from my canvas. I have found a lot articles on Stack Overflow but I don't get it.

This is my html:

<section id="graphs">
    <span id="tooltip">thisistest</span>
    <canvas id="myChart" class="tooltip" width="550" height="350"></canvas>
</section>

and this css:

//This part works
span#tooltip {
    display: none;
    position: relative;
    top: 8px; 
    left: 10px;
    padding: 5px; 
    margin: 10px;
    z-index: 100;
    background: #333;
    border: 1px solid #c0c0c0;
    opacity: 0.8; 
    width: 300px;
    color: White;
    text-align: left;
}

//This does not show the span...
canvas.tooltip:hover #tooltip {
    display: block;
}

Answer 1

I quickly made this fiddle. The main problem is your :hover statement. in the fiddle on line 22 of css.

http://jsfiddle.net/robbiebardijn/hDbq3/

#graphs:hover #tooltip