javascript - Detect if an element falls of the right side of screen - Stack Overflow

I'm trying to implement tool-tip, so I wrote this code :

var btns = document.getElementsByClassName('get-info');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('mouseover', showDetails, false);
    btns[i].addEventListener('mouseout', hiddenDetails, false);
    btns[i].nextElementSibling.addEventListener('mouseover', showParagraph, false);
    btns[i].nextElementSibling.addEventListener('mouseout', hideParagraph, false);
}

function showDetails() {
    this.nextElementSibling.style.display = "inline-block";
}

function hiddenDetails() {
    this.nextElementSibling.style.display = "none";
}

function showParagraph () {
    this.style.display = "inline-block";
}

function hideParagraph () {
    this.style.display = "none";
} 

HTML :

<div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>
    <div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>

CSS :

div {
    width: 22%;
    height: 10em;
    float: right;
    display: inline-block;
    background-color: #f0f0f0;
    margin-left: 2.5%;
    margin-bottom: 4.5%;
    position: relative;
}

.get-info {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #ccc;
    background-color: #FF4136;
    width: 60px;
    padding: 10px 0;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #f0f0f0;
}
.get-info:hover {
    cursor: pointer;
}

.info {
    display: none;
    width: 300px;
    background-color: #fff;
    font-family: Helvetica;
    font-weight: none;
    padding: 30px;
    border: 1px solid #ccc;
    position: absolute;
    right: -30%;
    top: 32px;
    overflow: hidden;
    z-index:100000;
    color:#666;
    font-weight:bold;
    line-height: 1.4em;
}

above code works perfectly but I want to add this feature : tool-tips should show in right side for last elements, for example when I hover on first buttons it looks like this :

but for last elements as you can see tool-tip not appears pletely:

How can I handle that, I know I should get offset of window but I'm not sure about that.

I'm trying to implement tool-tip, so I wrote this code :

var btns = document.getElementsByClassName('get-info');
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('mouseover', showDetails, false);
    btns[i].addEventListener('mouseout', hiddenDetails, false);
    btns[i].nextElementSibling.addEventListener('mouseover', showParagraph, false);
    btns[i].nextElementSibling.addEventListener('mouseout', hideParagraph, false);
}

function showDetails() {
    this.nextElementSibling.style.display = "inline-block";
}

function hiddenDetails() {
    this.nextElementSibling.style.display = "none";
}

function showParagraph () {
    this.style.display = "inline-block";
}

function hideParagraph () {
    this.style.display = "none";
} 

HTML :

<div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>
    <div>
        <button class="get-info">Hover</button>
        <p class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, repellat, dicta perferendis unde reiciendis quisquam consectetur consequatur ad debitis nihil possimus voluptates cupiditate culpa. Nobis quibusdam necessitatibus quis eveniet ratione.
        </p>
    </div>

CSS :

div {
    width: 22%;
    height: 10em;
    float: right;
    display: inline-block;
    background-color: #f0f0f0;
    margin-left: 2.5%;
    margin-bottom: 4.5%;
    position: relative;
}

.get-info {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #ccc;
    background-color: #FF4136;
    width: 60px;
    padding: 10px 0;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: #f0f0f0;
}
.get-info:hover {
    cursor: pointer;
}

.info {
    display: none;
    width: 300px;
    background-color: #fff;
    font-family: Helvetica;
    font-weight: none;
    padding: 30px;
    border: 1px solid #ccc;
    position: absolute;
    right: -30%;
    top: 32px;
    overflow: hidden;
    z-index:100000;
    color:#666;
    font-weight:bold;
    line-height: 1.4em;
}

above code works perfectly but I want to add this feature : tool-tips should show in right side for last elements, for example when I hover on first buttons it looks like this :

but for last elements as you can see tool-tip not appears pletely:

How can I handle that, I know I should get offset of window but I'm not sure about that.

• javascript
• html
• css

Share Follow edited May 3, 2021 at 9:04 T J 43.2k1313 gold badges8686 silver badges142142 bronze badges asked Mar 16, 2014 at 9:00 Sirwan AfifiSirwan Afifi 10.8k1414 gold badges6565 silver badges111111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

• Check whether the element is positioned left or right in the view port.
• If the element is positioned to the left, display the pop up in the right side, else display pop up in the left side

Check this fiddle

You can use the following function to calculate the position of hovered element

function getPosition(element) {
   var xPosition = 0;
   var yPosition = 0;

   while (element) {
       xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
       yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
       element = element.offsetParent;
   }
   return {
       x: xPosition,
       y: yPosition
   };
}

Using this modify your showDetails() function as follows:

function showDetails() {
   var ww = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); //width of the window
   var pos = getPosition(this); //position of the hovered element relative to window
   var ew = this.offsetWidth; //width of the hovered element

   if (pos.x > (ww / 2)) { //element is on right side of viewport
       this.nextElementSibling.style.left = '-'+(ww- (pos.x-ew)) + 'px';
   } else { //element is on left side of viewport
       this.nextElementSibling.style.left = (pos.x + ew) + 'px';
   }

    this.nextElementSibling.style.display = "inline-block";
}

My solution has two small parts:

1. Detect the left position of the DIV when it appears
2. If the left position is less than zero (i.e. off the side of the document), move it to the right by as many pixels as it was off to the left

See my jsfiddle demo here

First the function to work out the left position of the div, relative to the overall document:

function getOffsetLeft( elem ) {
    var offsetLeft = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

And next a tweak to your showDetails function to use this value:

function showDetails() {
    target = this.nextElementSibling;
    target.style.display = "inline-block";
    var myLeft = getOffsetLeft(target);
    if(myLeft < 0) {
        target.style.right = myLeft + "px";        
    }
}