Prevent CSS tooltip from going out of page/window

javascript jquery css tooltip
Paul M picture Paul M · Jun 21, 2018 · Viewed 21.4k times · Source

I have a CSS only tooltip which loads a span as a tooltip when you hover the link. However this is positioned with CSS but if the link is near to the top of a page or side then the tooltip goes off the side/top of the page.

Is there a way with css to make this change or will I have to rely on JS? I have started to try to put something together with jQuery but would rather use CSS if possible.

JS fiddle at https://jsfiddle.net/gtoprh21/12/

Snippet:

Answer

Takit Isy picture Takit Isy · Jun 27, 2018

Unfortunately, if you want to keep your tooltip good positioning, it isn't possible using only CSS.

Script solutions

But, as you're already using some script, I suggest you this solution:

  • Use position: absolute to position the .ktooltiptext accordingly to .ref,
  • Use the .getBoundingClientRect() method to easily get the position and size of the tooltip,
  • Apply some correction if out of the window,
  • Also made some modifications in CSS.

Snippet with only native JavaScript (avoiding jQuery, document will be lighter.)

Related questions

How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More