Question

我想将W3-Tooltip集成到我的项目中。在正常屏幕上可以正常运行，但在手机上无法运行。示例如下：https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_left

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

缩小屏幕时，工具提示将停留在原处，并显示滚动条。

我想要一个css解决方案，其中工具提示在小屏幕上的位置将有所不同。我的想法是拥有

左右宽度：相对于屏幕
top：相对于父对象（带下划线的关键字）

然后，工具提示可以从左到右填充整个屏幕，但停留在关键字下方。

有人知道如何解决此定位问题吗？我希望没有javascript的解决方案，但是如果没有javascript不可能，那么也可以。

Answer 1

使用媒体查询将工具提示在较小的屏幕上不同地放置：

@media only screen and (max-width: 600px) { /* adjust max-width for the screen-size you want */
    .tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px;
    margin-top: 10px; /* adjust this if needed */
  }

  .tooltip .tooltiptext::after {
    top: 0%;
    left: 50%;
    margin-top: -9px;
    margin-left: -5px;
    border-width: 5px;
    border-color: transparent transparent black transparent;
  }
}

无需使用JavaScript即可响应的CSS工具提示

1 个答案: