link 的样式标题

Question

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

这是 link 的标记 (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 */
}

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

Answer 1

您的代码所面临的问题似乎部分是因为 .tooltip:before pseudo-element 在其他地方使用（同样可能由图书馆）。由于您已经在使用 jQuery 移动图书馆，您最好看看 jQuery UI's tooltip.

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

库当前正在向锚元素添加 overflow: hidden。如果不删除，工具提示将不会完全显示，因为溢出的部分将被隐藏。
```
.ui-page-theme-a .ui-block-a a.ui-btn {
    overflow: visible;
}
```

使用 span 标签而不是 a 标签创建工具提示（因为如前所述，a 标签的 pseudo-element 似乎已被使用）。

<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;
}
```

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

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;
}

下面的代码是针对底部的三角形。我使用 transform: rotate(45deg) 方法创建三角形而不是边界方法，因为我们只有一个备用 pseudo-element。额外的渐变是必需的，因为我们只需要为三角形的一半大小着色。

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

link 的样式标题

Style title of link

css

title

hyperlink

jquery-mobile