如何在可滚动元素中使用工具提示？

Question

我有一个可以在 x 方向滚动的元素，其中包括工具提示：

<div class="scroll-container">
    <ul class="nav nav-tabs mt-4">
        <div class="nav-item">
            <div class="nav-link d-flex vertical-center">
                <span class="tooltip">
                    <span class="tooltip__content">
                        <a>Action 1</a>
                    </span>
                </span>
            </div>
        </div>
        <div class="nav-item">
            <div class="nav-link d-flex vertical-center">
                <span class="tooltip">
                    <span class="tooltip__content">
                        <a>Action 2</a>
                    </span>
                </span>
            </div>
        </div>
    </ul>
</div>

滚动容器的样式是：

.scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid #dee2e6;
}

以及工具提示的样式：

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

  .button {
    margin: 0;
  }

  .tooltip__content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    min-width: 120px;
    z-index: 2;

    display: block;
    margin-top: 10px;
    padding: 4px 8px;

    background: #445e5f;
    border-radius: 4px;

    font-size: 12px;
    color: #fff;
    text-align: center;
    text-transform: none;
    white-space: normal;
    font-weight: normal;

    visibility: hidden;
    opacity: 0;
    transition: all 0.25s ease-out;

    &:after {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);

      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-bottom: 5px solid #445e5f;
    }

    &--wide {
      min-width: 240px;
    }
  }

  &:hover .tooltip__content {
    visibility: visible;
    opacity: 1;
  }
}

这向我展示了这样的视图：

Action 1 下方的小三角形是工具提示。如果我删除overflow-x:auto 和overflow-y:hidden 工具提示将按我预期的方式工作，但这次可滚动功能消失了。如何将可滚动（overflow-x：auto；和overflow-y：hidden；）和工具提示一起使用？

这里是完整代码：https://jsfiddle.net/w6bfzduk/51/

Answer 1

抱歉，您的 CSS 不完整，我无能为力。