Native js implements mouse following to display floating box information

The effect to be achieved:

The code is as follows:

html part: (defined class name: one-zkfb)

 
0

Mean value of first-level branch line impedance

js part:

 var x = 10;var y = 20;// Mean value of first-level branch line impedance Hover information$('div.one-zkfb').mouseover(function (e) {console.log(e) // The printed element e contains relevant information after the mouse is moved in$('body').append('
' +''+"
"+'' + '
');// Every time the mouse moves in, first set the data to null$('.max').text('')$('.min').text('')$('.max').text('Maximum value: '+parent.data.statisticData.avgFirstBranch.maxValue +'mΩ')$('.min').text('Minimum: '+parent.data.statisticData.avgFirstBranch.minValue +'mΩ')$('#mytitle').css({'left': (e.pageX + x + 'px'),'top': (e.pageY + y - 80 + 'px')}).show();}).mouseout(function () {// mouse out event, remove dom element$('#mytitle').remove();}).mousemove(function (e) {// mouse over event$('#mytitle').css({'left': (e.pageX + x +10 + 'px'),'top': (e.pageY + y - 20 + 'px')}).show();})

The css code is also shown here:

 #mytitle {width: 130px;height: 80px;position: absolute;color: #000;max-width: 160px;font-size: 14px;padding: 4px;border: solid 1px #ced5d3;border-radius:10px !important;text-align: center;line-height: 30px;background-color: #fff;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}