css+js实现元素内容超过显示区域时以省略号显示隐藏内容，鼠标移动到元素时显示完整内容

今天在工作中遇到一个问题，需求要求超出显示区域的内容以省略号显示，鼠标移动到有省略号的记录上时，显示含有完整内容的提示框。刚开始我用的是css的text-overflow:ellipsis加html中的title属性来实现，后来测试时发现此方案在firefox及IE中行不通，因为在firefox和IE中，如果title中含有一长串由数字或字母组成的字符串，并且此字符串一行显示不下时，浏览器会自动截断。此问题目前除了手动添加换行符外没有其他办法，因为我此次的需求内容是动态的不能手动添加换行符，而我用不想在加插件，所以手写了一个提示框根据内容是否省略来提示内容。
1.html

<div id="tipTool" class="tipDiv">
        <p id="tipElement"></p>
</div>
<div id="sysAdminDir" class="sysadminRoute title-color">
        <span>当前路径:</span>
        <span id="sysadminCurRoute"></span>
</div>

#tipTool 提示框–用来显示完整路径
#sysadminCurRoute显示当前路径，如果路径超出显示区域则超出部分以省略号显示
2.css

#sysAdminDir span
{
    display: inline-block;
    overflow: hidden;
}
#sysadminCurRoute
{
    max-width: 820px;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.tipDiv {
    display: none;
    max-width: 400px;
    border-width: 1px;
    z-index:999;
    position: absolute;
    top: 0px;
    left: 0px;
}
#tipElement {
    color: #000000;
    background-color: rgba(255,255,255,1);
    word-wrap:break-word;
}

注意点：
1.#sysadminCurRoute此元素要省略超出显示部分，这个元素显示方式必须是block或inline-block，要有固定宽度或最大宽度，overflow属性为hidden， text-overflow属性ellipsis（超出部分省略），white-space:nowrap（不换行）;
2.提示框即tipDiv ，此元素定位要为绝对定位或浮动定位，即要使此元素脱离文档流；
3.提示信息所在元素即#tipElement，此元素需要注意 设置word-wrap为break-word即单词内换行

3.js

window.onload = function(){
	$('#sysadminCurRoute').mouseover(function(e){
        var scrollWidth = this.scrollWidth;//元素真实宽度
        if (scrollWidth >= 820) {
            var posX = e.pageX;
            var posY = e.pageY + 10;
            $('#tipTool').css({'top': posY + 'px','left': posX + 'px','display':'block'});
        }
    });
    $('#sysadminCurRoute').mouseout(function(e){
        $('#tipTool').css({'display':'none'});
    });
}
$('#sysadminCurRoute，#tipElement').html(showDir);