如何为JSP Struts中禁用的图片链接添加tooltip（不可使用JS及jQuery）

你遇到的title无法显示的问题核心是pointer-events: none属性会让元素完全忽略所有鼠标交互事件，包括触发title提示的hover动作，因此直接给应用了blocked类的<s:a>标签添加title属性不会生效。

方案1：使用原生title，改动最小 #

把title属性添加到没有设置pointer-events: none的父元素<li>上即可，父元素可以正常响应hover事件触发title显示，同时子元素<s:a>的禁用跳转效果不受影响。
修改后的代码示例：

<li class="button-link" data-idp="idfirst" title="你需要展示的提示文本">
<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>
</li>

你可以在JSP/Struts渲染阶段判断当前项是否需要添加blocked类，同步给对应的<li>添加title属性即可。

方案2：纯CSS实现自定义Tooltip #

如果需要更美观的自定义提示效果，也可以通过纯CSS实现，不需要任何JS：

步骤1：添加CSS样式 #

/* 给包含禁用项的li设置定位上下文 */
li.button-link.has-blocked {
  position: relative;
}
/* 定义提示框样式 */
li.button-link.has-blocked::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  display: none;
  z-index: 9999;
}
/* 定义提示框小箭头 */
li.button-link.has-blocked::before {
  content: "";
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0,0,0,0.8);
  display: none;
  z-index: 9999;
}
/* hover时显示提示 */
li.button-link.has-blocked:hover::after,
li.button-link.has-blocked:hover::before {
  display: block;
}

步骤2：修改HTML代码 #

后端渲染时，给需要添加blocked类的项对应的<li>添加has-blocked类和data-tooltip属性即可：

<li class="button-link has-blocked" data-idp="idfirst" data-tooltip="自定义提示内容">
<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>
</li>

该方案兼容性好，所有主流浏览器均支持，样式可自行调整符合你的UI规范。

内容的提问来源于stack exchange，提问作者EisenRm