CSS 만 사용하는 툴팁

body
{overflow-x:hidden;}

div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}

a
{position:relative;white-space:nowrap;}

a > span.tooltip
{
    position: absolute;
    white-space: normal;
    width: 100%;
    top: 130%;
    left: 0;
}

a > span.tooltip > span
{
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    left: -500%;
    width: 1100%;
}

a > span.tooltip > span > span
{
    display: inline-block;
    background: black;
    border-radius: 4px;
    padding: 10px;
    color: white;
    max-width: 300px;
}

데모 : http://jsfiddle.net/b2Yqf/

msie78 9 10, firefox, chrome에서 작동

마크 업이 세 개의 중첩 된 <span>s 로 만들어지기 때문에 원하는 것이 아닙니다 .하지만 YES. 할 수 있습니다!