【发布时间】：2016-02-24 14:12:28
【问题描述】：
我正在尝试用纯 css 制作工具提示，我希望它们具有响应性，这意味着它们应该漂浮在内部，并且左侧没有空间的地方，它们应该显示在右侧或顶部或底部。
我正在尝试这样的事情
span {
position: relative;
}
div {
margin: 150px 100px 50px 50px;
border: 1px solid Black;
height: 100px;
}
left,
right,
bottom,
top {
position: absolute;
background: black;
color: white;
max-width: 90px;
}
left {
left: 0;
}
right {
right: 0;
}
bottom {
margin: 0 auto;
bottom: 0;
left: 0;
right: 0;
}
top {
margin: 0 auto;
top: 0;
left: 0;
right: 0;
}<span>
<div>
<top>
TOP
</top>
<bottom>
BOTTOM
</bottom>
<right>
RIGHT
</right>
<left>
LEFT
</left>
</div>
</span>但是真的不行。
真正的问题是我无法为父元素设置固定宽度，因为它们必须适应任何父元素。
我想知道这在纯 CSS 中是否仍然可行，但看起来我必须在 javascript 中计算所有内容...
【问题讨论】：
-
你看过jQuery UI tooltip了吗？
-
这不是我的小提琴，我是从一个简单的谷歌搜索纯 css 工具提示中找到的。实际上有很多关于这方面的内容，你先看了吗？ jsfiddle.net/greypants/zgCb7
-
@Rohit416 我很想避免使用 js
-
@J.J 我不能使用固定尺寸，如果你把 width:auto 放在工具提示上你会看到它不起作用
-
如果我理解你this可以帮助你。
标签： css responsive-design tooltip