自定义鼠标悬置事件title样式

CSS样式

		#mytitle {
    
    
            position: absolute;
            color: #ffffff;
            max-width: 900px;
            font-size: 12px;
            line-height: 20px;
            padding: 20px;
            background: rgb(5, 73, 89);
            rgba(40, 40, 40, 0.8);
            border-radius: 5px;
            margin: 10px 50px 10px 50px;
        }

用于title展示的标签

<div id="content"></div>
<div id="mytitle" style="display: none"></div>

js代码块

//鼠标悬置
function myTitle(content){
    
    
    console.log("myTitle");
    $(function () {
    
    
        var x = 10;
        var y = 20;
        var newtitle = content;
        $('#mytitle').html(newtitle);
        $('#mytitle').show();
        $('.mytooltip').mouseover(function (e) {
    
    
            $('#mytitle').css({
    
    
                'left': (e.pageX + x + 'px'),
                'top': (e.pageY + y - 80 + 'px')
            }).show();
        }).mouseout(function () {
    
    
			$('#mytitle').html("");
            $('#mytitle').hide();
        }).mousemove(function (e) {
    
    
            $('#mytitle').css({
    
    
                'left': (e.pageX + x + 10 + 'px'),
                'top': (e.pageY + y - 60 + 'px')
            }).show();
        });
    });
}

动态加载使用

function show(content) {
    
    
    var str = "";
    if (content.length > 5) {
    
    
        let subContent = content.substring(0, 5) + "..";
        str = "<span class='mytooltip' οnmοuseοver='myTitle(\"" + content + "\")'>[" + subContent + "]</span>\n";
    }else {
    
    
        str = "<span>[" + content + "]</span>\n";
    }
    $("#content").append(str);
}

实际效果展示

自定义title会随鼠标移动显示。