Question

当我在文本框内部单击时会显示工具提示，当我使用以下JavaScript代码和CSS退出文本框时，工具提示会消失。问题是滚动页面。刀尖的位置变化等于滚动值。如何在HTML中修复工具提示相对于文本框的位置？

org.springframework.web.client.HttpClientErrorException: 415 Unsupported Media Type
        at org.springframework.web.client.DefaultResponseErrorHandler.handleError(DefaultResponseErrorHandler.java:88)
        at org.springframework.web.client.RestTemplate.handleResponseError(RestTemplate.java:537)
        at org.springframework.web.client.RestTemplate.doExecute(RestTemplate.java:493)
        at org.springframework.web.client.RestTemplate.execute(RestTemplate.java:452)
        at org.springframework.web.client.RestTemplate.exchange(RestTemplate.java:425)

Answer 1

请使用绝对位置而非固定位置。

除此之外，请注意您的解决方案，因为如果更改文本框本身的坐标，工具提示将不会一起移动。

更好的解决方案是创建一个包装元素，使其相对位置，并在工具提示上使用绝对位置。这样，如果您移动包装器，工具提示将随之移动。

Answer 2

使用纯css创建此工具提示。

＆＃13;

body {
  height:800px;
}

.container {
  position: relative;
  margin-top: 50px;
}

.tooltip {
  display: none;
  background-color: #000;
  position: absolute;
  padding: 2px 5px;
  border-radius: 10px;
  color: orange;
  top: -30px;
  left: 60px;
}

.tooltip:before {
  content: '\25bc';
  position: absolute;
  top: 18px;
  color: #000;

}

.txt:focus + .tooltip {
  display: inline-block;
}

＆＃13;

<div class="container">
	TextBox : <input type="text" class="txt">
	<div class="tooltip">This is TextBox</div>
</div>

＆＃13;

如何在HTML中修复相对于文本框的工具提示的位置？

2 个答案: