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

Question

我有一个用户注册jsp页面，其中我正在使用密码字段并重新输入密码字段来进行用户注册，还使用了工具提示来进行密码策略以及重新输入密码策略。但是此javascript工具提示在Internet Explorer中无法正确显示，它越来越失真。我要放弃我所做的一切。

<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]-->