jquery 如何根据可用空间更改工具提示位置

np8igboo 于 2023-03-07 发布在 jQuery

关注(0)|答案(4)|浏览(162)

如果底部没有足够的空间，我如何让工具提示出现在顶部，反之亦然？有没有CSS破解或者我必须用JS计算它？

.foo {
  position: relative;
}

.tooltip {
  display: none;
}

.foo a:focus+.tooltip {
  display: block;
  background: black;
  position: absolute;
  color: white;
  padding: 5px;
  z-index: 1;
}

<div class="foo"><a href="#" class="foo"> this is a link</a>
  <div class="tooltip">this is a tooltip</div>
</div>
<div class="foo"><a href="#" class="link">this is a link</a>
  <div class="tooltip">this is a tooltip</div>
</div>

jquery

来源：https://stackoverflow.com/questions/48018574/how-to-change-the-tooltip-position-based-on-available-space

4条答案

按热度按时间

1l5u6lss1#

你可以试试这个。它可能对你有帮助。
中央支助系统

.foo {
  position: relative;
}

.tooltip {
  display: none;
}

.foo a:focus+.tooltip {
  display: block;
  background: black;
  position: absolute;
  color: white;
  padding: 5px;
  z-index: 1;
}

Javascript语言

$("#tt").css({ top: $("#ll").position().top - 30 });

超文本标记语言

<br>
<br>
<div class="foo"><a href="#" class="foo" id="ll"> this is a link</a>
  <div class="tooltip" id="tt">this is a tooltip</div>
</div>

赞(0）回复(0）举报 2023-03-07

sr4lhrrt2#

不幸的是，你不能通过CSS动态地添加。你总是可以创建一个类，然后手动地将它添加到底部的元素中。但是如果你想要一个动态的行为，你需要JS的帮助来确定空间的可用性。

赞(0）回复(0）举报 2023-03-07

lp0sw83n3#

你可以使用引导工具提示。如果没有下面的代码可以帮助。

.foo {
  position: relative;
}

.tooltip {
  display: none;
}

.foo a:focus+.tooltip {
  display: block;
  background: black;
  position: absolute;
  color: white;
  padding: 5px;
  z-index: 1;
}

.foo a:focus+.tooltip.top {
     top: -1.5em;
  }

  .foo a:focus+.tooltip.bottom {
    top: 1em;
  }

<div class="foo"><a href="#" class="foo"> this is a link</a>
  <div class="tooltip top">this is a tooltip</div>
</div>
<div class="foo"><a href="#" class="link">this is a link</a>
  <div class="tooltip bottom">this is a tooltip</div>
</div>

赞(0）回复(0）举报 2023-03-07

ttp71kqs4#

您必须使用js来计算您的元素在页面上的位置。在动态页面中，您的元素将出现在顶部、底部、左侧和右侧。

如果链接出现在屏幕的前半部分，则添加.tooltipTop，否则添加.tooltipBottom类。
可以通过在代码中添加多个链接进行测试。

<!DOCTYPE html>
<html>
<head>
  <title>Side Project</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body{
	height:auto;
}

.foo {  position: relative;}

.tooltip {
  position: absolute;
  display: none;
  background: black;
  color: white;
  padding: 5px;
  z-index: 1;
}

.tooltipTop{
  top: 20px;
  display: block;
}

.tooltipBottom{
	top: -25px;
	display: block;
}
</style>
<body>
<div class="foo"><a href="#" class="link"> this is a link1</a>
  <div class="tooltip">this is a tooltip1</div>
</div>
<br>
<br>

<div class="foo"><a href="#" class="link">this is a link2</a>
  <div class="tooltip">this is a tooltip2</div>
</div> 

<div class="foo"><a href="#" class="link"> this is a link3</a>
  <div class="tooltip">this is a tooltip3</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="foo"><a href="#" class="link">this is a link4</a>
  <div class="tooltip">this is a tooltip4</div>
</div> 
</body>

<script>
$(document).ready(function(){
    $(".foo").click(function(){
                var bodyheight = $("body").height();
		var halfbodyheight = bodyheight/2;
		
		var parent = $(this).parent();
		var position = $(this).position().top;

		if(position >= halfbodyheight){
			$(".tooltip").removeClass("tooltipBottom tooltipTop");
			$(this).find('.tooltip').addClass("tooltipBottom");
		}
		else{
			$(".tooltip").removeClass("tooltipBottom tooltipTop");
			$(this).find('.tooltip').addClass("tooltipTop");
		}
		
    });
});
</script>
</html>

赞(0）回复(0）举报 2023-03-07

我来回答

jquery 如何根据可用空间更改工具提示位置

4条答案

相关问题

热门标签

最新问答