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

代替

data-tooltip="my tooltip"

您的data-tooltip属性应为data-title

现在应该可以使用。

Answer 2

下面的示例...

此代码引自Chris Bracco。请查看this article了解详情。

/* 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>

如何使用data- *作为椭圆元素的工具提示

2 个答案: