使用CSS或JS進行工具提示定位

Question

我僅使用CSS為Web應用程序創建工具提示。 到目前為止，我已經為以下課程提供了非常方便的工具提示：

• 工具提示
• 工具提示
• 左工具提示
• 工具提示右

兩者的不同之處在於箭頭和動畫。 例如，“ tooltip-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%);
    }

  }

請記住，有四個工具提示類，因此您的解決方案必須同時考慮左，右和頂部的工具提示。 感謝您的任何信息和事先幫助。

Answer 1

您可以使用與定位箭頭相同的技巧：將translateY(-50%)與position: absolute和top: 50%結合使用。

由於50%是相對於工具提示的，因此它將始終保持居中。 兩個陷阱：

• 注意不要將工具提示翻譯到視線之外
• 有時，如果高度為奇數像素大小，文本可能會變得模糊。 例如：高度27像素會將工具提示向下移動13.5像素。

 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> 

Answer 2

嘗試：

.tooltip-up,
.tooltip-down,
.tooltip-left,
.tooltip-right {
    font-size: 12px; /* I think you should use the unit em instead for better scaling */
    position: absolute;
    text-align: center!important; /* why !important ? */
    visibility: hidden; /* I think you should remove this line since you set opacity to 0 */
    background-color: rgba($gray, 0.99);
    color: #fff;
    text-align: left; /* I think you should remove this line */
    border-radius: 3px;
    width: 250px; /* I think you should use the unit em instead */
    height: auto; /* I think you should remove this line, for auto is the default value */
    padding: 7px 10px; /* I think you should use the unit em instead */
    z-index: 1; /* I think you should set this to the next greatest value in your code, just in case */
    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: 1em; /* Try what works best, but don't use % because when there's a lot of text, the arrow would fall off place */
    content: "";
    height: 0;
    left: -7px;
    position: absolute;
    width: 0;
    transform: translateY(-50%);
}

}