How to control the hover effect in CSS3?

Question

In the example below I will show you a sample of what I have right now and you will notice when you hover over the black box a transition occurs and slides in my tooltip. My problem is that I want that tooltip to only appear when I hover over the black box. In the example you will notice if you hover over the black or anywhere within 180px right of the black box the transition still occurs( this is because my graphic is 180px wide)! I want to restrict the hover effect to only the black box! Please help!

HTML

    <div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
</div>

CSS

#sidemenu {
    width: 60px;
    height: 100%;
    min-width: 60px;
    height: 100vh;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    position: absolute;
    left:-60px;
    transition: left ease-in-out 0.5s;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 481px;
    min-height: 481px;
    min-width: 60px;
    max-width: 60px;
    max-height: 481px;
    background-color: #383D3F;
    position: relative;
    top: 25%;
    bottom: 25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background: #000;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background: #555;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
}

Example:

JSFIDDLE

Answer 1

Best way I can see is to make it so you can't hover over the tooltip when it's not visible.

I achieved this by setting it initially to height: 0. Here's the changes

#regionsUnitedStatesTooltip {
    height: 0;
    transition: opacity ease-in-out 0.25s, left ease-in-out 0.25s;
}

#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
    height: 60px;
}

Demo ~ http://jsfiddle.net/pTMCP/3/

Update

Even simpler, add these two lines...

#regionsUnitedStatesTooltip {
    visibility: hidden; /* add this */
}

#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
    visibility: visible; /* and this */
}

Demo ~ http://jsfiddle.net/pTMCP/5/