7

次のことを達成できる方法を考えるのに苦労しています。論理的に考えましたが、javascript (jQuery) なしでは実行できないと確信しています。

私が達成しようとしていることを達成するための巧妙な CSS トリックを誰かが持っているかどうかを知りたいだけです。

説明に:-)。divaを 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;}

アップデート

jQuery または javascript (またはツールチップを表示または非表示にする CSS コード) に関する回答を投稿しないでください。これは自分で書くことができます。これがCSSで実現できるかどうかを知りたいだけです。ツールチップの機能はここでは関係ありません。私は単にあなたの意見/解決策を聞きたいだけです:-)

4

2 に答える 2

8

どうぞ！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;
}

</p>

于 2012-10-03T15:21:42.297 に答える
0

あなたはまったく必要ありません、単にあなたと位置display: table-cellを置くだけです：あなたに絶対的です。display:inline-block<li><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;
}
于 2012-10-03T15:00:05.983 に答える