鼠標移入標題，標題文字全部顯示

實現下面類似圖片的功能

一、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();'>