Question

如果底部没有足够的空间，如何让工具提示显示在顶部，反之亦然？是否有任何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>

Answer 1

你可以尝试这个。它可能对你有帮助。

CSS

.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 });

HTML

<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>

Answer 2

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

Answer 3

您可以使用bootstrap工具提示。如果不是以下代码可能会有所帮助。

.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>

Answer 4

您必须使用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>

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

4 个答案: