鼠标移入标题，标题文字全部显示

实现下面类似图片的功能

一、HTML页面添加Css样式

<style type="text/css">
    
        .tooltip {
            position: absolute;
            display: none;
            z-index: 9900000;
            outline: none;
            padding: 5px;
            border-width: 1px;
            border-style: solid;
            border-radius: 5px;
            -moz-border-radius: 5px 5px 5px 5px;
            -webkit-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
            background-color: white;
            color: black;
        }
    </style>

二、HTML页面添加 js代码

<script type="text/javascript">
    function mouseOver(t, e, data) {
        //参数含义
        //t:指当前对象，即超链接<a>
        //e:event事件
        //data:要显示的内容
        var tooltipHtml = "<div id='tooltip' class='tooltip'>" + data + "</div>";
        $(t).append(tooltipHtml); //添加到页面中
        $("#tooltip").css({
            "top": (e.pageY) + 20 + "px",
            //"left": (e.pageX) + "px"
        }).show("fast"); //设置提示框的坐标，并显示
    }
    function mouseOut() {
        $("#tooltip").remove();
    }

</script>

三、在鼠标移入文本上所在的标签添加两个事件 移入事件onMouseOver和移出事件 onMouseOut

<a href="#" class="warning-detail" onMouseOver='mouseOver(this,event,"要显示的文字");' onMouseOut='mouseOut();'>