css - 链接标题样式

Question

我正在努力使用 jQuery-mobile 设置链接标题的样式。每个链接都是一个播放器。每个玩家都有特殊的能力。这是我希望在用户将鼠标悬停在该播放器上时显示的内容。我尝试了很多代码示例，但没有一个有效。我最后的尝试在于这个 jsFiddle .

这是链接的标记 (HTML):

<li class="ui-btn-icon-left"><a class="tooltip" data-tooltip="Promising goalkeeper" href="#"><span>L_Oikonomo</span></a></li>  

下面是工具提示的 CSS(没有供应商前缀):

/* tooltip body text */
 .tooltip:hover:before {
    display:block;
    background:#eee;
    background:linear-gradient(rgba(255, 205, 205, 0.9), rgba(228, 230, 230, 0.9));
    content:attr(data-tooltip);    /* this link attribute contains tooltip text */
    position:absolute;
    font-size:0.9em;
    color:rgba(51, 51, 51, 0.9);
    bottom:20px;    /* ensure link text is visible under tooltip */
    right:0px;    /* align both tooltip and link right edges */
    width:11em;    /* a reasonable width to wrap tooltip text */
    text-align:center;
    padding:4px;
    border:2px solid rgba(204, 153, 153, 0.9);
    border-radius:6px;
    box-shadow:-2px -2px 2px rgba(20, 20, 20, 0.4);
}
/* styles shared by both triangles */
 .tooltip:hover span:before, .tooltip:hover span:after {
    content:"";
    position:absolute;
    border-style:solid;
}
/* outer triangle: for border */
 .tooltip:hover span:before {
    bottom:5px;    /* value = tooltip:hover:before (border-width*2)+1 */
    right:40px;    /* controls horizontal position */
    border-width:16px 16px 0;    /* top, right-left, bottom */
    border-color:rgba(204, 153, 153, 0.9) transparent;    /* top/bottom, right-left (lazy becasue bottom is 0) */
}
/* inner triangle: for fill */
 .tooltip:hover span:after {
    bottom:8px;    /* value = tooltip:before (border-width*2) */
    right:42px;    /* above 'right' value + 2 */
    border-width:14px 14px 0;    /* 2 less than above */
    border-color:rgba(225, 238, 238, 0.95) transparent;    /* tweak opacity by eye/eyedropper to obscure outer triangle colour */
}

有没有可能让它工作？ 如果没有，您是否还有其他想法来设置链接标题的样式？

Answer 1

您的代码所面临的问题似乎部分是因为 .tooltip:before 伪元素在别处使用(同样可能由库)。由于您已经在使用 jQuery 移动库，您最好查看 jQuery UI's tooltip。 .

如果您不想使用该库，则应进行以下更改以解决问题并在将鼠标移到 anchor 元素上时显示样式化的工具提示(或标题):

• 库目前正在向 anchor 元素添加 overflow: hidden。如果不删除，工具提示将不会完全显示，因为溢出的部分将被隐藏。

  .ui-page-theme-a .ui-block-a a.ui-btn {
      overflow: visible;
  }

• 使用 span 标签代替 a 标签创建工具提示(因为如前所述，a 标签的伪- 元素似乎已被使用)。

  <li class="ui-btn-icon-left">
    <a href="#">
      <span class="tooltip" data-tooltip="Promising goalkeeper">L_Oikonomo</span>
    </a>
  </li>

• 将 position: relative 添加到 span 元素，因为我们需要相对于它绝对定位工具提示。

  .tooltip {
      position: relative;
  }

• 添加代码以在将鼠标移到 anchor 上时显示工具提示。除了一些最小的更改外，这与您的原始代码几乎相同。添加了 z-index，以便工具提示显示在链接文本上方。

  a:hover .tooltip:before {
      position: absolute;
      content: attr(data-tooltip);
      bottom: 2em; /* ensure link text is visible under tooltip */
      right:0px; /* align both tooltip and link right edges */
      height: 2em;
      width: 11em;
      background:linear-gradient(rgba(255, 205, 205, 0.9), rgba(228, 230, 230, 0.9));
      content:attr(data-tooltip); /* this link attribute contains tooltip text */
      font-size:0.9em;
      color:rgba(51, 51, 51, 0.9);
      text-align:center;
      padding:4px;
      border:2px solid rgba(204, 153, 153, 0.9);
      border-radius:6px;
      box-shadow:-2px -2px 2px rgba(20, 20, 20, 0.4);
      z-index: 1;
  }

• 下面的代码用于底部的三 Angular 形。我使用 transform: rotate(45deg) 方法而不是 border 方法来创建三 Angular 形，因为我们只有一个备用伪元素。额外的渐变是必需的，因为我们只需要为三 Angular 形的一半大小着色。

  a:hover .tooltip:after {
      content:"";
      position:absolute;
      bottom: calc(2em - 8px);
      right:42px;
      height: 10px;
      width: 10px;
      background: linear-gradient(135deg, transparent 50%, #eee 50%);
      border: 1px solid rgba(204, 153, 153, 0.9);
      border-width: 0px 2px 2px 0px;
      transform: rotate(45deg);
      z-index: 2;
  }

Fiddle Demo