osmos/osmos-custom-elements/osTooltip/osTooltip.js

OSMOS - Symbiosys

export class OsTooltipCustomElement {

  constructor(){
    this.maxWidth = 270;
    this.placement = 'right';
  }

  osTooltip(event) {
    let el = event.srcElement || event.target;
    let sibling = el.nextElementSibling || el.nextElementSibling;
    var windowW = window.innerWidth;
    var ePosition = el.getBoundingClientRect() || el.getBoundingClientRect();

    let eRight = windowW - ePosition.right;
    let eLeft = 0 + ePosition.left;

    sibling.style.top = ePosition.top + 10 + 'px';
    sibling.style.transform = 'translateY(-50%)';

    if(eLeft > eRight && eLeft > this.maxWidth) {
      sibling.style.right = eRight + 30 + 'px';
      this.placement = 'left';
    } else if(eRight > eLeft && eRight > this.maxWidth){
      sibling.style.left = eLeft + 30 + 'px';
      this.placement = 'right';
    } else if(eLeft < this.maxWidth && eRight < this.maxWidth) {
      sibling.style.left = '50%';
      sibling.style.top = ePosition.top + 30 + 'px';
      sibling.style.transform = 'translateX(-50%)';
      this.placement = 'bottom';
    }
  }
}