"tooltip"
Bootstrap 4.0.0 Snippet by JSBM

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <lable title="sdd it" class="top">toppppppppp</lable> <lable title="sdd it" class="bottom">bottommmmmm</lable> <lable title="sdd it" class="right">rightttttt</lable> <lable title="sdd it" class="left">left////////</lable> <div id="idiot"></div>
div.tooltip { min-height: 10px; color: #fff; background: rgb(39, 37, 37); position: absolute; min-width: 100px; max-width: 25vw; padding: 10px; opacity: 0; } lable { background: #fAf; padding: 10px; position: fixed; margin-bottom: 600px; } lable.right{ right: 0px; } lable.top{ top: 0px; } lable.bottom{ right: 0px; top: 80vh; } lable.left{ left: 0px; top: 80vh; } #idiot { position: fixed; top: 0; left: 0; right:0px; bottom: 0px; margin: auto; background: rgba(17, 17, 17, 0.322); color: #fff; height: 150px; width: 150px; } body {height: 100%; width:100%; overflow-x: hidden}
$(function () { $("lable").on("mousemove", function (event) { let y = event.pageY - 40; let x = event.pageX + 10; var position = $(this).position(); let X = position.left.toFixed(0); let Y = window.pageYOffset.toFixed(0); if ($(this).find('div.tooltip').length == 0) { let $new = $("<div/>", { class: "tooltip", text: $(this).attr("title") }); $(this).append($new); $new.animate({ opacity: 1 }, 1000); } else { tempY = y + 20 if (Y >= y) { y = y + 50; } if (x>=X) { x = x - 140; } if(x<=window.pageXOffset){ x = x +150; } $(this).find('div.tooltip').offset({ top: y, left: x }); } $("#idiot").html("X = " + X + " , Y =" + Y + "<br/> x = " + x + ", y =" + y); }).mouseout(function () { $(this).find('div.tooltip').remove(); }); })

Related: See More


Questions / Comments: