Show tooltip only on hover

Question

I've made some tooltips for my dot navigation. The are now visible, but I want them to only be visible on hover. What am I doing wrong?

I've played a bit with display: none and visibility but when I make a code like this:

span.tooltip {
display: none;
}

span.tooltip:hover {
display: block;
}

Nothing happens, they aren't visible at all.

Here's a JSFiddle. http://jsfiddle.net/hEZmE/

HTML

<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
                <a href="#fbsection1" class="cbp-fbcurrent"><span class="tooltip">Home</span></a>
                <a href="#fbsection2"><span class="tooltip">De mogelijkheden</span></a>
                <a href="#fbsection3"><span class="tooltip">Restauratie</span></a>
                <a href="#fbsection4"><span class="tooltip">Het proces</span></a>
                <a href="#fbsection5"><span class="tooltip">Werkplaats</span></a>
                <a href="#fbsection6"><span class="tooltip">Ambacht en Handwerk</span></a>
                <a href="#fbsection7"><span class="tooltip">Contact</span></a>
            </nav>

<section id="fbsection1"></section>
<section id="fbsection2"></section>
<section id="fbsection3"></section>
<section id="fbsection4"></section>
<section id="fbsection5"></section>
<section id="fbsection6"></section>
<section id="fbsection7"></section>

CSS

.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 9999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 25px 0;
border-radius: 50%;
border: 1px solid #333;
}

.no-touch .cbp-fbscroller > nav a:hover {
background: #333;
}

.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #333;
}

#fbsection1 {
background-color: #ccc;
height: 800px;
}

#fbsection2 {
background-color: #aaa;
height: 800px;
}

#fbsection3 {
background-color: #ccc;
height: 800px;
}

#fbsection4 {
background-color: #aaa;
height: 800px;
}

#fbsection5 {
background-color: #ccc;
height: 800px;
}

#fbsection6 {
background-color: #aaa;
height: 800px;
}

#fbsection7 {
background-color: #ccc;
height: 800px;
}


span.tooltip {
position: absolute;
margin-top: -6px;
margin-left: -120px;
width: 100px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: center;
color: #fff;
background: #333;
}

Answer 1

For one thing, your code doesn't work as is because you've applied your hover event to the tooltip, which is not displayed—you can't hover over something that isn't there (as berentrom pointed out) .

span.tooltip {
    display: none;
}

span.tooltip:hover {
    display: block;
}

What you're trying to do is show the tooltip when you hover over the dot, so you need to tie the hover event to the dot, and not to the tooltip.

Add this to your CSS:

span.tooltip { 
    display: none; 
}

#cbp-fbscroller a:hover > span.tooltip {
    display: block;
}

See here: http://jsfiddle.net/hEZmE/4/