[英]Aligning Tooltip (div) to Text (span). Possible?
I am struggling to think of a way in which I can achieve the following, I have thought of it logically and I am pretty sure I cannot do it without javascript (jQuery). 我正在努力想到一种方法,我可以实现以下目标,我已经逻辑地思考它,我很确定我不能没有javascript(jQuery)。
I simply would like to know whether anybody has any clever CSS tricks that will achieve what I am trying to achieve. 我只是想知道是否有人有任何巧妙的CSS技巧可以实现我想要实现的目标。
Onto the description :-). 在描述上:-)。 I am trying to vertically align a div
to a span
, where the div may be of different heights dependant on the content. 我试图将div
垂直对齐到span
,其中div可能具有取决于内容的不同高度。 Please see image below to get a better understanding of what I would like to do: 请参阅下面的图片,以便更好地了解我想要做的事情:
This is my starting point for the code (please forgive minification, just how I type). 这是我的代码的起点 (请原谅缩小,我打算如何输入)。
HTML: 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: 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 UPDATE
Please do not post up any answers regarding the jQuery or javascript (or any css code that shows or hides the tooltip), I can write this myself. 请不要发布有关jQuery或javascript(或显示或隐藏工具提示的任何css代码)的任何答案,我可以自己写。 I simply want to know whether this can be achieved with CSS. 我只是想知道这是否可以用CSS实现。 The functionality of the tooltip is irrelevant here, I simply want to hear your opinions/solutions to my aligning issue :-) 工具提示的功能在这里无关紧要,我只是想听听你对我的调整问题的意见/解决方案:-)
Here you go! 干得好! http://jsfiddle.net/25UWs/2/ http://jsfiddle.net/25UWs/2/
And here is an example that uses CSS3 transitions to show and hide the tooltip http://jsfiddle.net/25UWs/5/ 这是一个使用CSS3过渡来显示和隐藏工具提示的示例http://jsfiddle.net/25UWs/5/
NO javascript used. 没有使用javascript。 I also took the liberty to add in tooltip arrows with just css. 我也冒昧地用css添加工具提示箭头。
The key is to use these css properties (in the proper place of course) 关键是要使用这些css属性(当然在适当的位置)
display:table;
display: table-cell;
display: inline-block;
vertical-align: middle;
Here's the css from jsfiddle example: 这是来自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;
}
You don't need at all display: table-cell
, simply put display:inline-block
on your <li>
and position: absolute to your <div>
. 你根本不需要display: table-cell
,只需在你的<li>
上放置display:inline-block
在你的<div>
放置:absolute:absolute。
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.