如何使用 Data-* 作为省略号元素的工具提示

Question

我有一个包含省略号的范围，我想通过工具提示显示内容，但工具提示的位置似乎没有调整，因为我无法应用相对于父级的位置（由于省略号）。这是我尝试过的代码

    .data-tooltip:hover:before{
      content: "";
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-bottom: 5px solid rgba(0, 0, 0, 0.6);
      position: absolute;
      bottom: 82%;
      left: 25%;
      -webkit-transform: translate(-58%, 41.5%);
      transform: translate(-58%, 51.5%);
    }
    
    .data-tooltip:hover:after{
      content: attr(data-title);
      padding: 6px 8px;
      color: #fff;
      text-align: left;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      min-height: 32px;
      word-wrap: break-word;
      position: absolute;
      top: unset;
      bottom: 75%;
      -webkit-transform: translate(-50%, 50%);
      transform: translate(-50%, 50%);
    }

<span class="data-tooltip" data-tooltip="my tooltip">
      ellipsed content
    </span>

在这里，我对工具提示箭头使用"之前"，对工具提示内容使用"之后"，但它们的位置似乎也没有调整。我尝试将数据工具提示内容相对定位，但由于溢出：隐藏，工具提示在框外剪切。

Answer 1

下面的一个例子...

这段代码引用自克里斯·布拉科。有关详细信息，请查看本文。

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

<p style="margin-top:50px">
  <span data-tooltip="I’m the tooltip text.">I’m a span with a tooltip.</span>
</p>

Answer 2

而不是

data-tooltip="my tooltip"

您的data-tooltip属性应data-title

现在应该可以了。