как использовать data- * для всплывающей подсказки для элемента эллипсов - PullRequest
Новая
       47

как использовать data- * для всплывающей подсказки для элемента эллипсов

0 голосов
/ 27 декабря 2018

У меня есть диапазон, который содержит эллипсы, и я хочу показать содержимое через всплывающую подсказку, но положение подсказки, похоже, не меняется, так как я не могу применить положение относительно родителя (из-за эллипсов).Вот код, который я пробовал 

    .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>

Здесь я использую «до» для стрелки всплывающей подсказки и «после» для содержимого всплывающей подсказки, но их положение, похоже, тоже не меняется.Я попытался позиционировать свое содержимое всплывающей подсказки относительно данных, но из-за переполнения: скрытое, всплывающая подсказка выходит за рамки.

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Пример ниже ...

Этот код цитируется Крисом Бракко.Пожалуйста, посмотрите на эту статью для деталей. 

/* 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>
0 голосов
/ 27 декабря 2018

Вместо 

data-tooltip="my tooltip"

Ваш атрибут data-tooltip должен быть data-title

Это должно работать сейчас.

...