水平中心（动态宽度）工具提示

Question

一个水平中心如何成为工具提示，工具提示的宽度是动态的（由于文本和空白：nowrap）。

HTML

<div class="example">
    <a class="label" href="#">This is a link</a>
    <div class="tooltip">
        <p><strong>Please center me</strong></p>
        <p>Dolor sit amet this is a very long text that shall not break</p>
    </div>
</div>

CSS

.example {
    position: relative;
    margin: 200px 0 0 200px;
}
    .example .label {
        width: 40px;
        height: 40px;
        background: blue;
        color: white;
    }
    .example .tooltip {
        position: absolute;
        bottom: 45px;

        background: green;

        text-align: center;

        opacity: 0.75;

        white-space: nowrap;
    }
    .example .label:hover + .tooltip {
        opacity: 1.0;
    }
    .example .tooltip:after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -10px;
        border-top: 10px solid green;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }

示例 http://jsfiddle.net/dwLgLogb/2/