鼠标移动在文字上面，让其显示详细信息

鼠标移动在文字上面，让其显示详细信息

一、文字太多，以省略号结尾

<p id="p_0" onmouseover="showTooltip(this);" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    ${checkContentTitle}
</p>

二、鼠标移动在文字上面，弹出浮动的div让其显示详细信息

<script>  
function showTooltip(target) {  
    document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'block';  
}  
function hideTooltip(target) {  
    document.getElementById(target.id.replace(/^label/,'tooltip')).style.display = 'none';  
}  
</script>  

<label onmouseover='showTooltip(this);' onmouseout='hideTooltip(this);' id='label0'>把鼠标移到我上面看看...</label>  
<div id='tooltip0' style='display:none;border:1px solid gray;background-color:yellow;color:blue;'><p>这是一段文字的详细信息</p></div>  

三、完整的JSP代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="org.jeecgframework.core.util.ResourceUtil"%>
<% 
    String mobile_home_url = ResourceUtil.getConfigByName("letv.gcr.mobile.home.url");
%>
<script>
function showTooltip(target) {
    document.getElementById(target.id.replace(/^p_/,'div_tip_')).style.display = 'block';
    document.getElementById("div_title").style.display = 'none';
}
function hideTooltip(target) {
    document.getElementById(target.id.replace(/^p_/,'div_tip_')).style.display = 'none';
    document.getElementById("div_title").style.display = 'block';
}
</script>
<div class="nav">
    <div class="return"></div>

    <!--  标题  -->
    <div id="div_title" class="headline">
        <p id="p_0" onmouseover="showTooltip(this);" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            ${checkContentTitle}
        </p>
        <span>${checkContentNum}</span>
    </div>
    <div id="div_tip_0" style="display:none;" class="headline">
        <p id="p_0" onmouseout="hideTooltip(this);">
            ${checkContentTitle}
        </p>
        <span>${checkContentNum}</span>
    </div>

    <div class="home"></div>
</div>

<script>
    var historyBack = "${historyBack}";
    var searchForm = "${SearchForm}"
    var returnUrl = "${returnUrl}";
    $(".return").on("click",function() { // 返回
        if(historyBack == "true") { // historyBack为true
            history.back(-1);
        } else {
            if(searchForm==null||searchForm=="") { // searchForm为空
                if(returnUrl==null || returnUrl=="") { // returnUrl为空
                    location.href=document.referrer;
                }else{ // returnUrl非空
                    var locationUrl = ROOF.Utils.projectName() + returnUrl;
                    window.location.href = locationUrl;
                }
            } else { // searchForm非空
                if(returnUrl==null || returnUrl=="") { // returnUrl为空
                    location.href=document.referrer;
                }else{ // returnUrl非空
                    $("#"+searchForm).attr("action", ROOF.Utils.projectName() + returnUrl);
                    $("#"+searchForm).submit();
                }
            }
        }
    });

    $(".home").on("click",function() { // 主页
        var locationUrl = "<%=mobile_home_url%>";
        window.location.href = locationUrl;
    });
</script>