Question

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 wrong?

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

Answer 1

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:[phone]</li>
            <li>Email: <a href="mailto:[e-mail]">[e-mail]</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;
}