CSS 中的响应式工具提示

Question

我制作了一个关于将鼠标悬停在图标上的工具提示，它在桌面视图中运行良好。

工作片段：

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip img {
  width: 15px;
}

.tooltip .tooltiptext[data-position="bottom"] {
  visibility: hidden;
  width: 400px;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: #e2e8f0;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<label> Some Label </label>

  <span className="ml-2">
    <div class="tooltip">
      <img
        src="https://www.svgrepo.com/show/2297/doubts-button.svg"
        alt="help text"
      />
      <span data-position="bottom" class="tooltiptext">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </span>
    </div>
  </span>

而在移动视图中，这会导致水平滚动条。

请切换到移动视图查看问题。

我尝试过的事情：

我已尝试删除 margin-left 并修改 left 值之类的，

.tooltip .tooltiptext[data-position="bottom"] {

  visibility: hidden;
  width: 400px;
  .
  .
  .
  .
  .
  left: 0%;
  margin-left: 0px;
}

但这不起作用...请帮助我使用 CSS 使此工具提示在移动设备中响应。非常感谢。

Answer 1

只需添加以下css：

@media screen and (max-width: 576px) {
            .tooltiptext {
                width: 300px;
            }
        }