页面增加问号图标,鼠标放置会提示文字信息。（记录日志）

先上图

css样式

/*提示框*/
#mytitle {
    position: absolute;
    color: #ffffff;
    max-width: 160px;
    font-size: 14px;
    padding: 4px;
    background: rgba(40, 40, 40, 0.8);
    border: solid 1px #e9f7f6;
    border-radius:5px;
}

jsp页面
<img src="../images/question.png" class="mytooltip" title="这是一段提示的详细信息,内容待确定" style="position: absolute;top: 10px; right: 30px; width: 15px;cursor:pointer;">

实现这种效果的js代码

$(function () {
    var x = 10;
    var y = 20;
    var newtitle = '';
    var mytitleId = '';
    $('img.mytooltip').mouseover(function (e) {
        newtitle = this.title;
        this.title = '';
        $('body').append('<div id="mytitle" >' + newtitle + '</div>');
        $('#mytitle').css({
            'left': (e.pageX + x + 'px'),
            'top': (e.pageY + y - 80 + 'px')
        }).show();
    }).mouseout(function () {
        this.title = newtitle;
        $('#mytitle').remove();
    }).mousemove(function (e) {
        mytitleId = this.id;
        if (mytitleId=="pdl" || mytitleId=="ptv"){
            $('#mytitle').css({
                'left': (e.pageX + x +10 + 'px'),
                // 'top': (e.pageY + y - 60 + 'px')
                'top': (e.pageY + y - 120 + 'px')
            }).show();
        }else{
            $('#mytitle').css({
                'left': (e.pageX + x +10 + 'px'),
                'top': (e.pageY + y - 60 + 'px')
                // 'top': (e.pageY + y - 110 + 'px')
            }).show();
        }

    })
});