将工具提示(div)与文本(跨度)对齐.可能？

Question

我正在努力想到一种方法,我可以实现以下目标,我已经逻辑地思考它,我很确定我不能没有javascript(jQuery).

我只是想知道是否有人有任何巧妙的CSS技巧可以实现我想要实现的目标.

在描述上:-).我试图将a垂直对齐div到a span,其中div可能具有取决于内容的不同高度.请参阅下面的图片,以便更好地了解我想要做的事情:

这是我的代码的起点(请原谅缩小,我打算如何输入).

HTML:

<ul>
  <li><a href="address" title="no need for this as custom tooltip will replace">Link Text here</a>
    <div class="tooltip"><span>Description of the link here</span></div>
  </li>
  <li><a href="address">Link 2 Text here</a>
    <div class="tooltip"><span>Description of the link here</span></div>
  </li>
</ul>

CSS:

ul {list-style-type:none;margin:0;padding:0 0 0 30px;overflow:visible;}
li {position:relative;border:1px solid #000;margin:5px 0;}
li a {font-size:14px;}

li .tooltip {position:relative;margin-left:100px;width:140px;padding:10px;font-size:12px;background-color:#fff;border:1px solid #999;border-radius:4px;z-index:10;}

UPDATE

请不要发布有关jQuery或javascript(或显示或隐藏工具提示的任何css代码)的任何答案,我可以自己写.我只是想知道这是否可以用CSS实现.工具提示的功能在这里无关紧要,我只是想听听你对我的调整问题的意见/解决方案:-)

Answer 1

干得好!http://jsfiddle.net/25UWs/2/

这是一个使用CSS3过渡来显示和隐藏工具提示的示例http://jsfiddle.net/25UWs/5/

没有使用javascript.我也冒昧地用css添加工具提示箭头.

关键是要使用这些css属性(当然在适当的位置)

display:table;
display: table-cell;
display: inline-block;
vertical-align: middle;

这是来自jsfiddle示例的css:

ul {
    padding:0;
    margin: 20px;
    list-style-type:none;
    overflow:visible;
    display: table;
}

li {
    position:relative;
    margin:5px 0;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    float:left;
}

li a {
    color: #555;
    font-size:14px;
    display: inline-block;
    width: 100px;
    vertical-align: middle;
}

li .tooltip {
    background: #ff;
    width:140px;
    padding:10px;
    margin-left: 15px;
    font-size:12px;
    background-color:#fff;
    border:1px solid #999;
    border-radius:4px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

/* arrow */
li .tooltip:before,
li .tooltip:after {
    position: absolute;
    top: 50%;
    left: -8px;
    margin-top: -5px;
    content: '';
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 

    border-right: 8px solid #fff; 
}

li .tooltip:before {
    border-right-color: #999;
    left: -9px;
}

​