Detect if an element falls of the right side of screen

Question

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 completely:

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

Answer 1

• 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";
}