工具提示在 Firefox 中有效，但在 Chrome 中无效

Question

在我的web-app 中，我在带有图像的按钮上实现了一些工具提示。在 Firefox 中，它们按预期工作，也就是说，当您将鼠标悬停在该按钮上时，它们会出现在该按钮的正下方。但是，在 Chrome 中，它们出现在按钮的最左侧。

CSS：

      .tooltip {
        display: none;
      }
      button:hover .tooltip {
        display: block;
        position: absolute;
        background: #ffffaa;
        z-index: 10;
        padding: 2px;
        font-style: italic;
        font-family: Times;
      }

HTML：

      <div id="simulationButtons">
        <button id="playPauseButton">
          <img
            src="play.svg"
            alt="play"
            id="playImage"
            style="display: inline"
          />
          <img
            src="pause.svg"
            alt="pause"
            id="pauseImage"
            style="display: none"
          />
          <span class="tooltip">Play/Pause</span>
          <!--Didn't know modern browsers don't display alts automatically
              when you hover over an image.-->
        </button>

这在 Firefox 中按预期工作（这是适用于 Android 的 Firefox，但在桌面上看起来很相似）：

但是，由于某种原因，在 Chrome 中，工具提示被移动到按钮的左侧（这是 Android 上的 Chrome，我还没有设法在我的 Linux 上安装 Chrome，但我认为它在 Chrome 上看起来会很相似桌面）：

那么，Chrome 中发生了什么？我该如何解决？

Answer 1

您需要在<button id="playPauseButton">或<div id="simulationButtons">中设置position:relative

Answer 2

您正在使用position:absolute 定位工具提示，因此父“按钮”应该有position:relative

将此代码添加到您的 css 中，它会正常工作。

#playPauseButton, #fastForwardButton, #singleStepButton, #stopButton {
    position: relative;
}

每当您制作此类新按钮时，请务必将position:relative 也添加到该按钮。