hover effect tooltip following mouse

Question

I have little issue with css where I cant get working properly with transform. If tooltip has more text then it will be so much space between mouse and tooltip.

How to add all tooltips same space?

My code:

 $('.tooltipLink').hover(function () { var title = $(this).attr('data-tooltip'); $(this).data('tipText', title); if(title == ''){} else{ $('<p class="tooltip"></p>').fadeIn(200).text(title).appendTo('body'); } }, function () { $(this).attr('data-tooltip', $(this).data('tipText')); $('.tooltip').fadeOut(200); }).mousemove(function (e) { var mousex = e.pageX; var mousey = e.pageY; $('.tooltip').css({ top: mousey, left: mousex }) });

 .tooltip { transform: translate(-50%, -200%); display: none; position: absolute; color: #F0B015; background-color: #000; border: none; border-radius: 4px; padding: 15px 10px; z-index: 10; display: block; width: 100%; max-width: 200px; top: 0; left: 50%; text-align: center; }.tooltip:after { content: ""; display: block; position: absolute; border-color: #000000 rgba(0, 0, 0, 0); border-style: solid; border-width: 15px 15px 0; bottom: -13px; left: 50%; transform: translate(-50%, 0); width: 0; } /* ----------------------- Display ------------------------ */ * { box-sizing: border-box; } body { font-family: "Quicksand", sans-serif; text-align: center; padding: 20px 50px 0; background: #222; color: #eee; height: 100vh; }.wrapper { margin: 100px auto; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start; /* overflow: auto; */ }.wrapper > * { margin-bottom: 100px; flex-shrink: 0; max-width: 300px; } img { max-width: 300px; } hr { max-width: 100px; margin: 30px auto 0; border-bottom: 1px solid #444; } h1 { color: #F0B015; font-size: 2em; } a { color: #eee; } input { text-align: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Moving Tooltips on anything.</h1> <h2>Very light on the JS</h2> <hr> <div class="wrapper"> <a href="" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is">I'm a hyperlink</a> <p class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is"> <strong>A Paragraph</strong><br><br>space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is, in this moment, powerful; the empathy she extends to her guests feels real and deep; the conversations</p> <input type="text" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is" value="text input"></input> <button type="text" class="tooltipLink" data-tooltip="I am a Button,">Button</button> <img class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex. and Money, Her show isspace Anna Sale creates on the WNYC podcast Death, Sex. and Money: Her show is" src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/30256/karate.jpg"> </div>

I have tried play with transform but no help. if I make -200% smaller amount then there where is less text it doesnt work. Its gonna like flash or not working at all.

Answer 1

 $(".tooltipLink").hover( function () { var title = $(this).attr("data-tooltip"); $(this).data("tipText", title); if (title == "") { } else { $('<p class="tooltip"></p>').fadeIn(200).text(title).appendTo("body"); } }, function () { $(this).attr("data-tooltip", $(this).data("tipText")); $(".tooltip").fadeOut(200); } ).mousemove(function (e) { var mousex = e.pageX; var mousey = e.pageY - $(".tooltip:visible").outerHeight(true); $(".tooltip").css({ top: mousey, left: mousex, }); });

 .tooltip { transform: translate(-50%, -200%); transform: translateX(-50%); display: none; position: absolute; color: #f0b015; background-color: #000; border: none; border-radius: 4px; padding: 15px 10px; z-index: 10; display: block; width: 100%; max-width: 200px; top: 0; left: 50%; text-align: center; }.tooltip:after { content: ""; display: block; position: absolute; border-color: #000000 rgba(0, 0, 0, 0); border-style: solid; border-width: 15px 15px 0; bottom: -13px; left: 50%; transform: translate(-50%, 0); width: 0; } /* ----------------------- Display ------------------------ */ * { box-sizing: border-box; } body { font-family: "Quicksand", sans-serif; text-align: center; padding: 20px 50px 0; background: #222; color: #eee; height: 100vh; }.wrapper { margin: 100px auto; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: flex-start; /* overflow: auto; */ }.wrapper > * { margin-bottom: 100px; flex-shrink: 0; max-width: 300px; } img { max-width: 300px; } hr { max-width: 100px; margin: 30px auto 0; border-bottom: 1px solid #444; } h1 { color: #f0b015; font-size: 2em; } a { color: #eee; } input { text-align: left; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1>Moving Tooltips on anything.</h1> <h2>Very light on the JS</h2> <hr> <div class="wrapper"> <a href="" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is">I'm a hyperlink</a> <p class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is"> <strong>A Paragraph</strong><br><br>space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is, in this moment, powerful; the empathy she extends to her guests feels real and deep; the conversations</p> <input type="text" class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show isspace Anna Sale creates on the WNYC podcast Death, Sex, and Money. Her show is" value="text input"></input> <button type="text" class="tooltipLink" data-tooltip="I am a Button,">Button</button> <img class="tooltipLink" data-tooltip="space Anna Sale creates on the WNYC podcast Death, Sex. and Money, Her show isspace Anna Sale creates on the WNYC podcast Death, Sex. and Money: Her show is" src="https.//s3-us-west-2.amazonaws.com/s.cdpn.io/30256/karate.jpg"> </div>