Align the tooltip (div) to text (span). Possible?

Question

I'm struggling to come up with a way that I can achieve the following, I thought about it logically, and I'm sure I can't do it without javascript (jQuery).

I just wanted to know if anyone has clever CSS tricks that will achieve what I'm trying to achieve.

To the description :-). I am trying to vertically align a div with span , where the div may have different heights depending on the content. Please see the image below to better understand what I would like to do:

This is my starting point. for the code (please forgive minification, as I type).

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

Please do not post any answers to jQuery or javascript (or any css code that shows or hides the tooltip), I can write it myself. I just want to know if this can be done using CSS. The functionality of the tooltip doesn’t matter here, I just want to hear your opinions / solutions on my alignment problem :-)

Answer 1

Here you go! http://jsfiddle.net/25UWs/2/

And here is an example that uses CSS3 transitions to show and hide the hint http://jsfiddle.net/25UWs/5/

No javascript is used. I also took the liberty of adding tooltip arrows using only css.

The key is to use these css properties (in the right place, of course)

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

Here's the css from jsfiddle example:

 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; } 

Answer 2

You don't need display: table-cell , just put display:inline-block on your <li> and position: absolute on your <div> .

 .tooltip { position:absolute; right: -10px; top: -15px; /* or bigger if you need so */ margin-left:100px; width:140px; padding:10px; font-size:12px; background-color:#fff; border:1px solid #999; border-radius:4px; z-index:10; }