在禁用的图像链接 (JSP) 上显示工具提示答案

【问题标题】：show a tooltip on a disabled image link (JSP)在禁用的图像链接 (JSP) 上显示工具提示
【发布时间】：2021-10-02 19:20:45
【问题描述】：

我有一个显示一系列图像的弹出菜单，每个图像都包含一个不同的链接。

菜单的单个元素如下所示：

<li class="button-link" data-idp="idfirst">
<s:a href='%{linkMethod("linked")}' class="original-styling blocked"><span class="sr-only">Linked ID</span><img src="LinkedImage" onerror="this.src='ErrorImg'; this.onerror=null;" alt="linked ID" /></s:a>

Css 样式仅用于样式，除了被阻塞的样式，如下所示：

.original-styling.blocked {
  pointer-events: none;
  cursor: default;
}

在块的情况下，我还想添加一些看起来和行为类似于这个例子的东西： https://www.w3schools.com/css/css_tooltip.asp

但我无法让它工作，我什至尝试了 title 属性，但是当 .blocked 处于活动状态时，它不会显示，我什至会对工作标题感到满意。

我的主要限制是我不能使用 jquery、javascript 和其他“现代”东西，当然只能使用 JSP struts 和 java。

有什么线索吗？谢谢！

【问题讨论】：

标签： java html css jsp

【解决方案1】：

如果您使用pointer-events: none; 属性，则当鼠标悬停在其上时，工具提示弹出窗口将无法显示。

但是，如果您在 html 元素中添加了 disabled 标记，那么您可以获得被阻止链接的功能，并且仍然可以使用工具提示。

这是一个工作示例，希望它对你有用！

<!DOCTYPE html>
<html>
<style>

.originalStyling.blocked {
  cursor: default;
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.originalStyling .originalStylingtext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.originalStyling:hover .originalStylingtext {
  visibility: visible;
}
</style>
<body>

<s:a href="%{linkMethod("linked")}" class="originalStyling blocked" disabled>Linked ID
  <span class="originalStylingtext">
    <img src="https://techcabal.com/wp-content/uploads/2014/10/css3.jpg" onerror="this.src='ErrorImg'; this.onerror=null;" alt="linked ID" style="width:90%" />
  </span>
</s:a>


</body>
</html>

【讨论】：