javascript - 使用 CSS 或 JS 定位工具提示

Question

我正在使用 CSS 为网络应用程序创建工具提示。到目前为止，我有一个非常方便的工具提示与以下类一起使用:

• 工具提示
• 向下工具提示
• 左侧工具提示
• 工具提示-右

两者的区别在于箭头和动画。例如，“tooltip-right”类有一个指向左侧的箭头，它从左到右动画。

当工具提示有很多文本时，问题就来了，当工具提示中有很多文本时，tooltip-left、-right 和-up 的位置都不同。向下工具提示没有问题，因为默认情况下一切都向下环绕。

所以我的问题是，是否可以仅使用 CSS 来完美定位工具提示。或者会涉及一些 JS，如果是这样，你建议做什么？也许添加检查以查看工具提示有多少文本并添加一些内联 css 作为边距？例如，我试图复制 http://foundation.zurb.com/sites/docs/v/5.5.3/components/tooltips.html ，我们正在使用基础，但它和 Angular 似乎存在一些问题。

这是我到目前为止的一些代码:

  .tooltip-up,
  .tooltip-down,
  .tooltip-left,
  .tooltip-right {
    font-size: 12px;
    position: absolute;
    text-align: center!important;
    visibility: hidden;
    background-color: rgba($gray, 0.99);
    color: #fff;
    text-align: left;
    border-radius: 3px;
    width: 250px;
    height: auto;
    padding: 7px 10px;
    z-index: 1;
    opacity: 0;
    box-shadow: 0 2px 5px 0 rgba($solid-black, 0.16), 0 2px 10px 0 rgba($solid-black, 0.12);
    @include transition (.2s ease-in);
  }

  .tooltip-right {
    top: -35%;
    left: 135%;
    transform: translateX(-15%);
    margin-top: -10px;

    &:after {
      border-right: 7px solid rgba($gray, 0.99);
      border-bottom: 7px solid transparent;
      border-top: 7px solid transparent;
      top: 50%;
      content: " ";
      height: 0;
      left: -7px;
      position: absolute;
      width: 0;
      transform: translateY(-50%);
    }

  }

请记住，有四个工具提示类，因此您的解决方案必须同时考虑左侧、右侧和顶部的工具提示。感谢您事先提供的任何信息和帮助。 p>

Answer 1

您可以使用与定位箭头相同的技巧:将 translateY(-50%) 与 position: absolute 和 结合使用顶部:50%。

因为 50% 是相对于工具提示的，所以它总是居中。两个陷阱:

• 注意不要将工具提示翻译到看不见的地方
• 有时，如果高度为奇数像素大小，文本会变得模糊。例如:高度 27px 会将工具提示向下移动 13.5px。

p { display: inline-block; position: relative; border: 1px solid red; }

.tooltip-right {
  box-sizing: border-box;
  font-size: 12px;
  position: absolute;
  text-align: center;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 3px;
  width: 250px;
  padding: 7px 10px;
  z-index: 1;
  opacity: .8;
  
  top: 50%;
  right: 0;
  /* width + arrow width = 250 + 7 = 257 */
  transform: translate3d(257px, -50%, 0);
}

.tooltip-right::after {
  content: "";

  border-right: 7px solid black;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
  
  position: absolute;
  height: 0;
  width: 0;
  left: -7px;
  top: 50%;
 
  transform: translateY(-50%);
}

<h2>Use translateY for positioning</h2>
<p>
  <span>
    Lorem ipsum
  </span>
  <span class="tooltip-right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </span>
</p>