HTML/Sass：多行时工具提示的位置被破坏

Question

我当前项目中的工具提示代码如下：

HTML：

<div class="tooltip">
  <img class="icons" src="(...)" alt="Icon"/>
  <span class="tooltip--text">
    Hover-Text
    <span class="tooltip--text--arrow"></span>
  </span>
</div>

萨斯：

  &--tooltip {
    cursor: pointer;
    position: relative;
    display: inline-block;

    &:hover {
      .tooltip--text {
        visibility: visible;
        opacity: 1;
      }
    }

    &--text {
      position: absolute;
      z-index: 1;
      visibility: hidden;
      width: 120px;
      max-width: 200px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      padding: 3px 8px;
      margin-top: -3px;
      opacity: 0;
      transition: .3s;
      top: -45%;
      left: 45%;
      transform: translate(-50%, -50%);


      &--arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        bottom: -5px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px 5px 0;
        border-top-color: #000
      }
    }
  }

只要工具提示的文本在一行中，一切都可以根据需要完美运行。但是当工具提示有更多行时，工具提示的位置是错误的，我不知道如何解决这个问题。

如有任何帮助，我们将不胜感激，并提前致谢！

Answer 1

.tooltip--text {
    position: absolute;
    z-index: 1;
    visibility: hidden;
    width: 120px;
    max-width: 200px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 3px 8px;
    margin-top: -3px;
    opacity: 0;
    transition: .3s;
    bottom: 100%;
    left: 45%;
    transform: translateX(-50%);
}