javascript - 工具提示在 Internet Explorer 中不起作用

Question

我有一个用户注册 jsp 页面，我在其中使用密码字段和重新输入密码字段进行用户注册，还使用密码策略的工具提示以及重新输入密码策略。但是这个 javascript 工具提示在互联网上显示不正确资源管理器，它变得扭曲了。我正在放弃我所做的。

<div class="row">
    <label for="lbl-01"><bean:message key="registrationForm.userLoginPassword"/> <span class="formElementRequired">*</span></label><a href="#" class="tooltip-right" data-tooltip="Password should contain at least one Capital letter, one special character and one  number.And password length should be atleast 8 characters"><img src="/TMLWeb/image/help.png"/></a>
    <html:password property="userLoginPassword" styleId="userLoginPasswordId" styleClass="text" maxlength="100"/>
    <logic:messagesPresent property="userLoginPassword">
        <font color="red"><html:errors property="userLoginPassword" /></font>
    </logic:messagesPresent>
</div> 

我正在使用 data-tooltip 作为工具提示，但在 IE 中无法正常工作。有人可以帮忙吗？

Answer 1

您没有指定 IE 的版本——我们几乎总是需要知道这一点。

简而言之，data-tooltip 在 IE7 及以下版本中不执行任何操作。

我知道它在 IE8 中有部分支持，它应该在 IE9+ 中运行良好。

有几种方法可以解决这个问题...最简单的方法是在页面底部运行一些 JavaScript:

它将工具提示复制到 title 属性，这将适用于纯文本。

另一个选项是寻找 IE 的工具提示库，这超出了这个问题和 StackOverflow 的范围。

<!--[if lt IE 9]>
  (function() {
    function fixTooltips(els) {
      for (var i = 0; i < els.length; i++) {
        var el = els[i];
        var tooltip = el.getAttribute("data-tooltip");
        if (tooltip) {
          el.title = tooltip;
        }
      }
    }

    var els = document.getElementsByTagName("a");
    fixTooltips(els)
  }());
<![endif]-->