鼠标滑过显示文字提示

情况一：也是最好的，不占空间的。

 <a href="#" title="Zabbix"> <i class="icon-uniE6AB font-fouri"></i></a>

说明：对图片字体添加鼠标提示，a标签的title就可以实现，href为空连接。

情况二：通过两个函数显示onmouseover="showBlock('<%=i%>S')" 鼠标滑过操作，onmouseout="showNone('<%=i%>S')"鼠标离开操作，这个占有页面的空间，显示时页面布局可能有变化。

jsp代码：

<%int i = 0; %>
                             <c:forEach items="${hostList}" var="hostList">
                             <tr class="gradeX">
                                 <td  id="navigation" style="width: 157px;"><a href="/itm/host/${hostList.name }" target="_blank">${hostList.host }</a></td>
                                 <td>${hostList.inventory.software_app_e==null?' ':hostList.inventory.software_app_e }</td>
                                 <td>${hostList.inventory.serialno_a==null?' ':hostList.inventory.serialno_b }</td>
                                 <td>${hostList.inventory.url_a==null?' ':hostList.inventory.url_a }</td>
                                 <td>${hostList.inventory.poc_2_screen==null?' ':hostList.inventory.poc_2_screen }</td>
                                 <td  id="navigation">${hostList.inventory.site_notes }</td>
                                 <td>${hostList.inventory.site_rack }</td>

                                          <td class="center hidden-phone">${hostList.inventory.site_country }</td>

                                          <td class="center hidden-phone">${hostList.inventory.poc_2_phone_a }</td>
                                 
                                 <td style="text-align: center;">
                                 <c:choose>
  <c:when test="${hostList.status =='1'}">
  <span class="badge bg-important"> </span>
  </c:when>   
  <c:otherwise>
  <span class="badge bg-success"> </span>
  </c:otherwise>  
 </c:choose>
                                 </td>
                                 <td style="text-align: center; width:102px;">
                                 <div class="f1">
                                 <div id="<%=i%>available" class="font-fourdiv" onmouseover="showBlock('<%=i%>Z')" onmouseout="showNone('<%=i%>Z')">
                                         <a href="#" title="Zabbix"> <i class="icon-uniE6AB font-fouri"></i></a>
                                 </div>
                                 
                                 <div id="<%=i%>snmp_available" class="font-fourdiv" onmouseover="showBlock('<%=i%>S')" onmouseout="showNone('<%=i%>S')">
                                     <a href="#" title="SNMP"><i class="icon-uniE6A6 font-fouri"></i></a>
                                  </div>
                                  <div id="<%=i%>jmx_available" class="font-fourdiv" onmouseover="showBlock('<%=i%>J')" onmouseout="showNone('<%=i%>J')">
                                     <a href="#" title="JMX"><i class="icon-uniE69B font-fouri"></i></a>
                                  </div>
                                  <div id="<%=i%>ipmi_available" class="font-fourdiv" onmouseover="showBlock('<%=i%>I')" onmouseout="showNone('<%=i%>I')">
                                     <a href="#" title="IPMI"><i class="icon-uniE69A font-fouri"></i></a>
                                 </div>
                                 </div>
                                   <div id="<%=i%>xuanfu" style="display: none;font-weight: bold; "></div>//鼠标滑过显示div中的值，离开div隐藏。
                                 </td>
                                 <%i++; %>
                             </tr>
                             </c:forEach>     

js代码：

<script type="text/javascript">

/* function showBlock(e){
var leng = e.length;
var zabbix = e.substring(leng,leng-1);//取到参数的那个标志Z、J、S或是I
var num = e.substring(leng-1,0);//取到数字i方便以后去悬浮的id
var xuanfu = $("#"+num+"xuanfu");
if(zabbix=='Z'){
xuanfu.html("Zabbix");
} else if(zabbix=='S'){
xuanfu.html("SNMP");
} else if(zabbix=='J'){
xuanfu.html("JMX");
} else{
xuanfu.html("IPMI");
}
xuanfu.show();
} */
/* function showNone(e){
var leng = e.length;
var zabbix = e.substring(leng,leng-1);//取到参数的那个标志Z、J、S或是I
var num = e.substring(leng-1,0);//取到数字i方便以后去悬浮的id
var xuanfu = $("#"+num+"xuanfu");
xuanfu.hide();
} */

</script>