[英]tooltip positioning based on window size
我创建了一个工具提示。 这是小提琴 。
CSS代码
a.tooltip:hover span{
display:inline;
position:absolute;
border:1px solid #DCA;
background:#FF4747;
font-weight: bold;}
现在,如果我调整窗口的大小并悬停工具提示的内容,则由于窗口的大小已被缩小,因此工具提示的内容并不完全可见。 在小提琴中,如果您在小提琴中调整结果窗口的大小,则可以在第二行的最后一个元素中看到它。
我想以这样的方式放置工具提示:即使更改了窗口大小,它也始终可见。
我不熟悉窗口定位属性。 任何帮助表示赞赏。
a.tooltip span {
z-index:2;
display:none;
padding:14px 20px;
width:inherit;
line-height:16px;
position: relative;
}
a.tooltip {
position: relative;
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:1px solid #DCA;
background:#FF4747;
left: 0px;
bottom: 15px;
font-weight: bold;
}
要在较小的屏幕上调整宽度,可以使用媒体查询:
@media (max-width: 480px) {
a.tooltip:hover span{
display:inline;
position:absolute;
border:1px solid #DCA;
background:#FF4747;
left: -30px;
bottom: 18px;
font-weight: bold;
}
}
对于非常敏感的定位:
$(".tooltip").hover(function() {
var height = $(this).find('span').height();
var top = $(this).offset().top;
if(height > top){
$(this).find('span').css("top","10").css("bottom","inherit");
} else if(height < top) {
$(this).find('span').css("bottom","10").css("top","inherit");
}
});
将以上代码添加到您的JS中
尝试这个...
a.tooltip:hover span{
display:inline;
position:absolute;
left:0px;
width:inherit;
border:1px solid #DCA;
background:#FF4747;
font-weight: bold;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.