CSS Tooltip only working in FF

I have a tooltip written purely in CSS.

I've got it working in FF but for some reason it falls short in chrome and my list doesnt appear in my span.

I've made a jsFiddle if anybody can see where im going w开发者_Python百科rong?

http://jsfiddle.net/WW6MY/1/

---

It seems the problem is that, since you can't have anchors inside anchors, when the html is "fixed" for you when being parsed your structure is broken.

If you do not have a inside a it works: http://jsfiddle.net/WW6MY/2/

So you need to improve your structure and not have nested as.

---

Fiddle: http://jsfiddle.net/WW6MY/3/

Add a new element (.tooltip-container). Set the position:relative CSS attribute, so that absolutely positioned child elements are positioned correctly. Move your span element inside the anchor to this container, so that the anchors don't interfere with each other.

Finally, attribute the :hover pseudo-selector to this container element, so that the tooltip is display correctly.

HTML:

<span class="tooltip-container">
    <a href="mypage.aspx" class="twotip">Tommy Two Dogs</a>
    <span>
        <ul>
            <li>Name: My Name</li>
            <li>Contact DDI: 0123 444 5678</li>
            <li>Mobile:01234 567 890</li>
            <li>Email: <a href="mailto:me@home.com">me@home.com</a></li>
            <li><a href="mypage.aspx">Click here for more details</a></li>
        </ul>
    </span>
</span>

CSS:

.tooltip-container {
    position:relative;
}
.twotip + span {
    font-weight: normal;
    display: none;
    position: absolute;
}

.twotip {
    font-weight: bold;
    position: relative;
}

.tooltip-container:hover > span {
    background: red;
    font-size: 11px;
    height: 163px;
    color:#fff;
    left: -100px;
    display: inline;
    padding: 40px 30px 10px;
    top: 0px;
    width: 310px;
    z-index: 99;
}

.twotip ul li {
    color: #FFFFFF;
}