CSS Tooltip / Posts /

Automatically change tooltip postion

8
I tried using the css option and noticed the tooltip is hidden when it is close to the end of the window.

I tried changing the attribute to relative or inherit, but it does not work
Ehi  11 years ago   viewed: 16406    

2 Answers

0

You can usedrift bossJavaScript to detect the position of the tooltip relative to the viewport and adjust its position if it’s close to the edge.

const tooltip = document.querySelector('.tooltip');

const rect = tooltip.getBoundingClientRect();

if (rect.right > window.innerWidth) {

  tooltip.style.left = `${window.innerWidth - rect.width}px`;

}

if (rect.bottom > window.innerHeight) {

  tooltip.style.top = `${window.innerHeight - rect.height}px`;

}


brickton
  one month ago
-14
The CSS Tooltip is incapable to adjust its position smartly.
If you requires the tooltip to be able to adjust its position to be always viewable, you have to use Menucool JavaScript Tooltip.
milo   11 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲