limit tooltip display when hover the word only

Question

I am using tooltips on the li elements of my site (for now only Steel Man has it).

But the tooltip will display right away when I hover the grey zone. I am trying to make it appear only when I hover the word. Is it possible ?

Here si the code HTML :

   <ol class="rounded-list">
                    <li><a href="#" class="tooltip">Steel Man<em><img class="floatLeft" src="images/F9979.jpg" alt="" /><span></span>
                               TITRE DU FILM : Man of Steel                     <br />                                             <br />                                             RESUME : Film fantastique américain réalisé par Zack Snyder avec Henry Cavill, Amy Adams, Diane Lane                     <br />                                             <br />                                             DUREE : 2H23                     <br />                                             Un petit garçon découvre qu'il possède des pouvoirs surnaturels et qu'il n'est pas né sur la Terre. Plus tard, il s'engage dans un périple afin de comprendre d'où il vient et pourquoi il a été envoyé sur notre planète. Mais il devra devenir un héros s'il veut sauver le monde de la destruction totale et incarner l'espoir pour toute l'humanité...
                     </em></a></li>
                    <li><a href="#">Spiderman</a></li>
                    <li><a href="#">Pokemon</a></li>
                    <li><a href="#">X men</a></li>
                   <li><a href="#">Blanche Neige</a></li>
      </ol>

And the CSS code of the tooltip:

        a.tooltip {
            color: #FFFFFF;
            text-decoration: none;
            /*text-align:left*/
        }

        a.tooltip em {
            display:none;
        }
        a.tooltip:hover {
            border: 0;
            position: relative;
            z-index: 500;
            text-decoration:none;
        }
        a.tooltip:hover em {
            font-style: normal;
            font-family: MS Courier New;
            font-size:  17px;
            display: block;
            position: absolute;
            top: 60px;
            left: 0px;
            padding: 5px;
            color: #fff;
            /*border: 1px solid #642B89;*/
            /*background: #40195A;*/
            background-color:rgba(100,43,137,0.9);
            width:450px;
            box-shadow: 0 0 7px 2px #642B89;
        }

Answer 1

Try this

css

.rounded-list li {
    background: none repeat scroll 0 0 #DDDDDD;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    color: #444444;
    display: block;
    margin: 0.5em 0;
    padding: 0.4em 0.4em 0.4em 2em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.rounded-list li:before {
    background: none repeat scroll 0 0 #87CEEB;
    border: 0.3em solid #FFFFFF;
    border-radius: 2em 2em 2em 2em;
    content: counter(li, decimal);
    counter-increment: li;
    font-weight: bold;
    height: 2em;
    left: -1.3em;
    line-height: 2em;
    margin-top: -1.3em;
    position: absolute;
    text-align: center;
    top: 50%;
    transition: all 0.3s ease-out 0s;
    width: 2em;
}

jsFiddle File